移动端重构系列5——切入切出动画

移动端重构系列-mobile

本系列文章，若是没有特别说明，兼容安卓4.0.4+

由于后面的几篇文章都须要用到切入切出动画什么的，因此先把这个说下。为了简单起见，咱们这里只讨论translate偏移动画（translate比起绝对定位的top/left/right/bottom要高效），而如其余的旋转缩放淡入淡出什么的道理都同样。

transition动画

先定义要运动的元素在视觉范围以外，以左方向进入为例，同时定义transition：

.demo{
    @include translate3D(-2000px, 0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } 

从进入视觉范围来讲，不论方向从上下仍是左右，最终都归于0，因此进入的时候添加class translate-in，而离开的时候去掉translate-in便可

.translate-in{ @include translate3D(0, 0, 0); } 

animation动画

先定义要运动的元素在视觉范围以外，一样以左方向为例：

.demo{
    @include translate3D(-2000px, 0, 0); } 

再定义keyframes：

// 从左向右方向进入动画 @mixin left-in($startX: -2000px, $endX: 0) { @include keyframes(left-in) { 0% { @include translate3d($startX, 0, 0); } 100% { @include translate3d($endX, 0, 0); } } .left-in { @include animation-name(left-in); @extend %animated; } } // 从右向左方向消失动画 @mixin left-out($startX: 0, $endX: -2000px) { @include keyframes(left-out) { 0% { @include translate3d($startX, 0, 0); } 100% { @include translate3d($endX, 0, 0); } } .left-out { @include animation-name(left-out); @extend %animated; } } 

调用上面定义的keyframes，元素进入视觉范围添加class left-in，元素离开视觉范围则替换left-in为left-out，动画结束后调用animationend事件，删除left-out

@include left-in; @include left-out; 

解析后的css为：

.left-in, .left-out { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes left-in { 0% { -webkit-transform: translate3d(-2000px, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes left-in { 0% { transform: translate3d(-2000px, 0, 0); } 100% { transform: translate3d(0, 0, 0); } } .left-in { -webkit-animation-name: left-in; animation-name: left-in; } @-webkit-keyframes left-out { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-2000px, 0, 0); } } @keyframes left-out { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-2000px, 0, 0); } } .left-out { -webkit-animation-name: left-out; animation-name: left-out; }

总结

transition动画与animation动画的区别在于：

一、transition动画只能定义开始和结束位置，中间没法定义；而keyframes则能够定义n帧做为中间的过渡帧。

二、对于切入切出动画来讲，transition动画咱们只需添加删除一个class便可完成，而animation动画则须要切换两个class，再在最后删除class，比较复杂。

三、若是你的动画不须要定制中间帧，那直接使用transition动画便可，切换一个class就能够了，运动结束时候能够js调用transitionend函数，而若是须要定制中间帧，那么仍是animation，固然animation的事件有三个animationstart，animationiteration，animationend

如需转载，烦请注明出处：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-slider-animation.html