由于项目的需要，俺要做一些页面的转场动画。
即将是移动端，肯定是首先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);
真是头疼。。
--------------------都说海水深，怎抵相思半----------------------------