javascript - 滑入动画不起作用

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');
});

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

注意:为了兼容性，我尽量避免使用 @keyframes。

我在 codepen 上得到的:http://codepen.io/pcmckinstry/pen/OWLQeZ

Answer 1

好吧，我只是忘记了动画代码中间的 &。