效果展示
本文會講述如何使用scss/sass在微信小程序中實(shí)現(xiàn)列表順序加載的動畫收厨。
所用的css特性
CSS animations
CSS animations 使得可以將從一個CSS樣式配置轉(zhuǎn)換到另一個CSS樣式配置徽诲。動畫包括兩個部分:描述動畫的樣式規(guī)則和用于指定動畫開始、結(jié)束以及中間點(diǎn)樣式的關(guān)鍵幀。
相較于傳統(tǒng)的腳本實(shí)現(xiàn)動畫技術(shù)，使用CSS動畫有三個主要優(yōu)點(diǎn)：
- 能夠非常容易地創(chuàng)建簡單動畫，你甚至不需要了解JavaScript就能創(chuàng)建動畫拾酝。
- 動畫運(yùn)行效果良好，甚至在低性能的系統(tǒng)上卡者。渲染引擎會使用跳幀或者其他技術(shù)以保證動畫表現(xiàn)盡可能的流暢蒿囤。而使用JavaScript實(shí)現(xiàn)的動畫通常表現(xiàn)不佳（除非經(jīng)過很好的設(shè)計）。
- 讓瀏覽器控制動畫序列崇决，允許瀏覽器優(yōu)化性能和效果材诽，如降低位于隱藏選項(xiàng)卡中的動畫更新頻率。
css animations的屬性和子屬性見https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations#%E9%85%8D%E7%BD%AE%E5%8A%A8%E7%94%BB
可主要分為兩大部分恒傻，動畫的實(shí)現(xiàn)形式和動畫的屬性規(guī)則脸侥。
以下僅列出本文所用的屬性。
animation-timing-function
animation-timing-function 規(guī)定動畫的速度曲線碌冶。
animation-delay
顧名思義湿痢，設(shè)置動畫的持續(xù)時間，單位秒
animation-fill-mode
animation-fill-mode 屬性規(guī)定動畫在播放之前或之后扑庞，其動畫效果是否可見譬重。
使用keyframes定義動畫序列
keyframes就是一個描述關(guān)鍵幀的屬性，通過使用@keyframes建立兩個或兩個以上關(guān)鍵幀來實(shí)現(xiàn)罐氨。每一個關(guān)鍵幀都描述了動畫元素在給定的時間點(diǎn)上應(yīng)該如何渲染臀规。
因?yàn)閯赢嫷臅r間設(shè)置是通過CSS樣式定義的，關(guān)鍵幀使用percentage來指定動畫發(fā)生的時間點(diǎn)栅隐。0%表示動畫的第一時刻塔嬉，100%表示動畫的最終時刻。因?yàn)檫@兩個時間點(diǎn)十分重要租悄，所以還有特殊的別名：from和to谨究。這兩個都是可選的，若from/0%或to/100%未指定泣棋，則瀏覽器使用計算值開始或結(jié)束動畫胶哲。
示例
@keyframes list {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
如上代碼所示，定義了一個@keyframe名字叫l(wèi)ist潭辈，在動畫開始時使用縮放0%鸯屿，結(jié)束時縮放100%。那么它在整個動畫的過程中把敢，便會根據(jù)瀏覽器的性能展示一個從0%-100%漸變的動畫寄摆。是不是根據(jù)有點(diǎn)意思？當(dāng)然修赞，你也可包含設(shè)置任何額外可選的關(guān)鍵幀婶恼，描述動畫開始和結(jié)束之間的狀態(tài)，比如45%。
至此我們已經(jīng)實(shí)現(xiàn)了組件顯示時逐漸放大的效果
所用的scss特性
以下為簡介勾邦，詳細(xì)內(nèi)容請轉(zhuǎn)至官方文檔
嵌套規(guī)則 (Nested Rules)
scss/Sass允許將一個 CSS 樣式嵌套進(jìn)另一個樣式中联逻，內(nèi)層樣式僅適用于外層樣式的選擇器范圍內(nèi)。
引用父選擇器:&
你可以 & 字符來明確地表示插入指定父選擇器检痰。
變量: 
）
以美元符開頭，可當(dāng)變量使用锨推。
@mixin混入指令 (Mixin Directives)
混入(mixin)允許您定義可以在整個樣式表中重復(fù)使用的樣式铅歼，而避免了使用無語意的類（class），比如 .float-left换可∽狄混入(mixin)還可以包含所有的CSS規(guī)則，以及任何其他在Sass文檔中被允許使用的東西沾鳄。
他們甚至可以帶arguments慨飘，引入變量，只需少量的混入(mixin)代碼就能輸出多樣化的樣式译荞。
插值：#{}（Interpolation: #{}）
你可以通過 #{} 插值語法在選擇器和屬性名中使用 SassScript 變量：
@for
顧名思義瓤的，循環(huán)，要留意一下to和through的區(qū)別
引用混合樣式:@include （Including a Mixin: @include）
實(shí)現(xiàn)方式
wxml文件
<view class="list__item">
<view>...</view>
</view>
編譯前的scss/sass
.list {
&__item {
animation: list 1s ease both;
}
}
@keyframes list {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@mixin item($num) {
$waitTime: ($num)*0.2;
animation-delay: #{$waitTime}s;
}
@for $i from 1 through 7 {
.list__item:nth-child(#{$i}) {
@include item($i);
}
}
編譯后的css
.list__item {
-webkit-animation: list 1s ease both;
animation: list 1s ease both;
}
@-webkit-keyframes list {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes list {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.list__item:nth-child(1) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.list__item:nth-child(2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.list__item:nth-child(3) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.list__item:nth-child(4) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.list__item:nth-child(5) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.list__item:nth-child(6) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.list__item:nth-child(7) {
-webkit-animation-delay: 1.4s;
animation-delay: 1.4s;
}
參考資料
使用CSS動畫
CSS3 animation-timing-function 屬性
sass中文文檔
本文由 指尖魔法屋 首發(fā)吞歼，轉(zhuǎn)載必須申明原指尖魔法屋來源及源地址圈膏！ 聯(lián)系我請轉(zhuǎn)至指尖魔法屋！聯(lián)系我請轉(zhuǎn)至指尖魔法屋篙骡！聯(lián)系我請轉(zhuǎn)至指尖魔法屋稽坤！
