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，我只是忘记了动画代码中间的&。

幻灯片中的动画不起作用

1 个答案: