移動端重構系列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