滑入动画不起作用答案

【问题标题】：Slide In Animation Not Working滑入动画不起作用
【发布时间】：2017-01-02 08:12:02
【问题描述】：

我正在处理一个应该从右侧滑入的菜单。 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

【问题讨论】：

标签： javascript jquery css animation

【解决方案1】：

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

【讨论】：