即使设置了过渡，CSS动画也不会顺利返回

Question

我正在尝试使用 CSS 动画来控制移动菜单。

虽然它在一个方向上工作正常，但在另一个方向上却表现得很奇怪。

所以，我点击“1 级”，它会将菜单平稳地推到左侧。然后我想通过按“返回”返回该菜单，在 Firefox 上它会顺利滑回 仅第一次，而在 Chrome 上它根本不会顺利滑回。

这里重复的问题...

http://jsfiddle.net/ywczf6cx/1/

.mobile-nav-menu {
  left: 0%;
  list-style: outside none none;
  margin-left: 0;
  position: relative;
  transition:.75s ease 0s all;  
}


.mobile-nav-menu.left-one { 
    -webkit-animation: move_left .75s ease 0s 1 forwards;
    -moz-animation: move_left .75s ease 0s 1 forwards;
    -o-animation: move_left .75s ease 0s 1 forwards;
    -ms-animation: move_left .75s ease 0s 1 forwards;
    animation: move_left .75s ease 0s 1 forwards;
 }

#mobile-nav .sub-menu {
  display: none;
  height: auto;
  left: 100%;
  margin-left: 0;
  position: absolute;
  width: 100%;
}

#mobile-nav .sub-menu .sub-menu {
  position: relative !important;
  float: left;
}
.mobile-selected .sub-menu {
 display:block !important;
}

.mobile-nav-menu {
 transition:.75s ease 0s all;       
  left: 0%;
  list-style: outside none none;
  margin-left: 0;
  position: relative;
  transition:.75s ease 0s all;  
}

#mobile-nav .sub-menu li {
  float: left;
  height: auto !important;
  position: relative;
  width: 100% !important;
}

@-webkit-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

@keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}
 @-moz-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

 @-ms-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

 @-o-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

jQuery

jQuery(document).ready(function(){
    jQuery(document).on( 'click', '.mobile-level-two-click > a', function( event ) {
        jQuery('.mobile-nav-menu').addClass('left-one');
        jQuery(this).parent().siblings().removeClass('mobile-selected');        
        jQuery(this).parent().addClass('mobile-selected');
    });

    jQuery(document).on( 'click', '.mobile-menu-back-button', function( event ) {
        jQuery('.mobile-nav-menu').removeClass('left-one');

    }); 

});

HTML

<div id="mobile-nav" class="show-element">
             <div class="menu-mobile-navigation-container">
                 <ul class="mobile-nav-menu" id="menu-mobile-navigation">

                <li class="mobile-level-two-click menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-695" id="menu-item-695">
                    <a href="#">Level 1</a>
                    <ul class="sub-menu">
                        <li class="mobile-menu-back-button menu-item menu-item-type-custom menu-item-object-custom menu-item-699" id="menu-item-699"><a href="#">Back</a></li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-698" id="menu-item-698">
                            <a href="http://www.example.com/">Example</a>
                            <ul class="sub-menu">
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-700" id="menu-item-700"><a href="#">Sub page 1</a></li>
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-701" id="menu-item-701"><a href="#">Sub page 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>


                </ul>
            </div>      
</div>

Answer 1

首先，一旦您开始向此布局添加内容，您的动画就会遇到困难。原因是您正在为left 属性设置动画，这将导致浏览器计算每一帧的文档流，这会导致延迟。同样，使用transition: all; 是一个非常糟糕的主意，请指定您打算转换的各个属性。

其次，考虑清理您的标记。有很多很乱的选择器和名字，一般来说你的代码越通用越好。

您当前的解决方案无法顺利向后移动或根本无法向后移动的原因是，您的动画只有关键帧才能以一种方式移动它。

我已经稍微清理了您的代码，并在此处发布了解决此问题的方法，请注意如何仅对变换进行动画处理，并且将过渡设置为 only： http://codepen.io/r_p4rk/pen/NGZZwR