本系列文章，如果沒有特別說明，兼容安卓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

總結

以上是生活随笔為你收集整理的移动端重构系列6——切入切出动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。