本系列文章，如果沒(méi)有特別說(shuō)明，兼容安卓4.0.4+

因?yàn)楹竺娴膸灼恼露夹枰玫角腥肭谐鰟?dòng)畫(huà)什么的，所以先把這個(gè)說(shuō)下。為了簡(jiǎn)單起見(jiàn)，我們這里只討論translate偏移動(dòng)畫(huà)（translate比起絕對(duì)定位的top/left/right/bottom要高效），而如其他的旋轉(zhuǎn)縮放淡入淡出什么的道理都一樣。

transition動(dòng)畫(huà)

先定義要運(yùn)動(dòng)的元素在視覺(jué)范圍之外，以左方向進(jìn)入為例，同時(shí)定義transition：

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

從進(jìn)入視覺(jué)范圍來(lái)說(shuō)，不論方向從上下還是左右，最終都?xì)w于0，所以進(jìn)入的時(shí)候添加class?translate-in，而離開(kāi)的時(shí)候去掉translate-in即可

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

animation動(dòng)畫(huà)

先定義要運(yùn)動(dòng)的元素在視覺(jué)范圍之外，同樣以左方向?yàn)槔?#xff1a;

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

再定義keyframes：

// 從左向右方向進(jìn)入動(dòng)畫(huà) @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; } } // 從右向左方向消失動(dòng)畫(huà) @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; } }

調(diào)用上面定義的keyframes，元素進(jìn)入視覺(jué)范圍添加class?left-in，元素離開(kāi)視覺(jué)范圍則替換left-in為left-out，動(dòng)畫(huà)結(jié)束后調(diào)用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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。