即使有过渡设置，CSS动画也不会顺利回归-CSSAnimationwontgobacksmoothlyevenwithtransitionset

作者：mobiledu2502855777 | 来源：互联网 | 2023-05-17 15:31

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

I am trying to use CSS animation to control a mobile menu.

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

While it works fine in one direction it behaves strangely in the other direction.

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

So, I click "Level 1" and it pushes that menu smoothly to the left. I then want to go back to that menu by pressing "Back" and on Firefox it slides back smoothly only the first time and on Chrome it doesnt slide back smoothly at all.

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

Problem replicated here...

问题在这里复制了......

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

1 个解决方案

#1

First things first, your animation will struggle once you start to add content to this layout. The reason for that is you're animating the left property, this will cause the browser to calculate the document flow each frame and this causes lag. Similarly, using transition: all; is a very bad idea, specify the individual properties you intend on transitioning.

首先,一旦开始向此布局添加内容,您的动画就会很难。原因是你正在为左边的属性设置动画,这将导致浏览器计算每帧的文档流量,这会导致滞后。同样,使用转换:全部;这是一个非常糟糕的主意,请指定您想要转换的各个属性。

Secondly, consider cleaning up your markup. There are a lot of very messy selectors and names, generally speaking, the more generic your code is the better.

其次,考虑清理你的标记。有很多非常凌乱的选择器和名称,一般来说,代码越通用越好。

The reason your current solution isn't moving back smoothly, or at all, is because your animation only has the keyframes to move it one way.

您当前解决方案没有顺利移动的原因,或者根本就是因为您的动画只有一个关键帧可以单向移动。

I've cleaned your code up a little and posted a solution to this problem here, notice how only transform is animated and the transition is set to transform only: http://codepen.io/r_p4rk/pen/NGZZwR

我已经清理了你的代码并在这里发布了一个解决这个问题的方法,注意只有变换是动画的,并且转换只设置为转换:http://codepen.io/r_p4rk/pen/NGZZwR