Слайд в анимации Не работает

Question

У меня есть меню, над которым я работаю, и должен двигаться справа. HTML выглядит следующим образом:

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

Я использую CSS (SCSS) и JQuery для обработки анимации, добавив .active класс

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

Answer 1

Welp, я просто забыл & в середине кода анимации.