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可能是

＆＃13;

*{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}

＆＃13;

<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>

＆＃13;

使用转换

＆＃13;

*{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}

＆＃13;

<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>

＆＃13;

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

1 个答案: