幻燈片在動畫不工作

我有一個菜單我正在工作，應該從右側滑入。該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

幻燈片在動畫不工作

回答

相關問題