css动画结束后 js无法修改translated值 .

由于项目的需要,俺要做一些页面的转场动画。

即将是移动端,肯定是首先css动画了。

结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性translate3d的值;

起初,以为是项目过于复杂,代码之前造成了相互影响,可事实并非如何。

后来,我便写了个简单demo来测试;

css:

@keyframes slideInRight {
0% {
visibility: visible;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
} 100% {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} .slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-duration: .35s;
}
 

在css动画结束后,js手动设置translate3d()竟然无效,真是很头疼,即便是在谷歌浏览器也无法设置其值。

无奈,只能在动画结束后再先移除动画样式,但即使是这样,在部分浏览器中也会出现无法更改的情况

 $('.page').on('webkitAnimationEnd', function (e) {//webkit动画结束隐藏
$(this).removeClass('animated slideInRight').trans3d(0);
}, false);

真是头疼。。

--------------------都说海水深,怎抵相思半----------------------------

上一篇:MySQL 进阶4 SQL常见函数: 字符函数/数学函数/日期函数/流程控制函数(if/case)


下一篇:PLSQL远程连接到Oracle服务器