html - 如何在隐藏/显示时创建动画？

Question

    <div class="overlay"></div>

CSS:

    .overlay::after
     {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           content: "";
           z-index: -1;
           height: 100%;
           transition: all 0.5s ease-in-out;
           opacity: 0.5;
        }

        .popup::before
        {
           content: "";
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;. 
           height: 100%;
           z-index: -1;
           transition: all 0.5s ease-in-out;
        }

这是我的覆盖类。我将此 div 显示为所有弹出窗口的掩码。但问题是即使我有过渡属性，它也没有显示任何动画。我想把它从左到右。我可以通过在隐藏时给出负左和在显示时给出正左来做到这一点。有没有办法在不留下负数的情况下实现这一目标。有什么建议吗？？

Answer 1

纯CSS可以是

*{box-sizing: border-box}
menu{
  position: absolute;
  top: 40px;
  left: -200px;
  width: 200px;
  display: block;
  background: black;
  color: white;
  transition: left .3s ease
}
menu li{padding: 10px 14px}
input:checked + menu{
  left: 0
}
label{cursor: pointer}

<label for=toogleMenu >Click to toggle the Menu </label>
<input type=checkbox id=toogleMenu hidden />
<menu>
  <li>Home</li>
  <li>Work</li>
  <li>Contact</li>
  <li>Help</li>
</menu>

使用变换

*{box-sizing: border-box}
menu{
  position: absolute;
  top: 40px;
  left: 0px;
  width: 200px;
  display: block;
  background: black;
  color: white;
  transform: translateX(-200px);
  transition: transform .3s ease
}
menu li{padding: 10px 14px}
input:checked + menu{
  transform: translateX(0);
}
label{cursor: pointer}

<label for=toogleMenu >Click to toggle the Menu </label>
<input type=checkbox id=toogleMenu hidden />
<menu>
  <li>Home</li>
  <li>Work</li>
  <li>Contact</li>
  <li>Help</li>
</menu>