由于项目的需要,俺要做一些页面的转场动画。即将是移动端,肯定是首先css动画了。结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性translate3d的值;起初,以为是项目过于复杂,代码之前造成了相互影响,可事实并非如何。 ...
由于项目的需要,俺要做一些页面的转场动画。
即将是移动端,肯定是首先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无法修改translated值 .
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。