幻灯片在动画不工作

我有一个菜单我正在工作，应该从右侧滑入。该HTML看起来像这样：幻灯片在动画不工作

<div class="slide-in"> 
<ul class="menu"> 
    <li class="item"> Option 1</li> 
    <li class="item"> Option 2</li> 
</ul>

我使用的CSS（SCSS）和jQuery加入了。主动类

的CSS来处理动画：

.slide-in { 
    opacity: 1; 
    height: 300px; 
    width: 250px; 
    background-color: white; 
    position: absolute; 
    right: 0; 
    margin: { 

     top: 27px; 
    } 
    .menu { 
     padding-left: 0; 
     padding-top: 25px; 

     list-style: none; 
     .item { 
      padding-right: 25px; 
      font-size: 26px; 
      text-align: right; 
      padding-top: 10px; 
      padding-bottom: 10px; 
      border-bottom: 1px solid #222; 
      &:first-child { 
       border-top: 1px solid #222; 
      } 
     } 
    } 
    // Animation 
    transition-duration: 500ms; 
    transform: translateX(300%); 
    .active { 
     transform: translateX(0%); 
    } 
}

和jQuery：

$('.hamburger').click(function(){ 
    $('.meat').toggleClass('active'); 
    $('.hamburger').toggleClass('active'); 
    $('.slide-in').toggleClass('active'); 
});

问题是，transform: translateX();在.slide-in.active {}似乎没有工作。本质上，.slide-in框应该从屏幕右侧开始，然后当按下按钮时，它将移动到位。该框目前位于屏幕右侧300％，并且不会移回原位。

注：为了兼容性，我试图避免使用@keyframes。

我已经有了codepen什么：http://codepen.io/pcmckinstry/pen/OWLQeZ

来源

2017-01-01 CMckinstry

韦尔普，我只是在动画代码的中间忘了&。

来源

2017-01-02 00:12:02 CMckinstry

幻灯片在动画不工作

回答

相关问题