如何在hide/show上创建动画？

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>