title: css動(dòng)畫和transition過渡
toc: true
date: 2017-03-20
- vue組件
- 技術(shù)分享
分享css動(dòng)畫和transition過渡的一些個(gè)人理解。
css動(dòng)畫
確定元素樣式
查看并確定被加動(dòng)畫的元素原有樣式，以便在制作動(dòng)畫時(shí)有樣式參照浮驳。
定義動(dòng)畫名稱
實(shí)例代碼：
@keyframes actionfirst {
from {top: -30px;opacity: 0;}
to {top: 0;opacity: 1;}
}
@keyframes actiontwo {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
說明：
-
@keyframes為css創(chuàng)建動(dòng)畫的規(guī)則； -
actionfirst和actiontwo為自己要定義的動(dòng)畫名稱宣旱； - 如果動(dòng)畫只有一次變化，則用
from{動(dòng)畫開始時(shí)的樣式狀態(tài)}to{動(dòng)畫結(jié)束時(shí)的樣式狀態(tài)}的方式叛薯，大括號里可以寫多種樣式浑吟，它們在動(dòng)畫進(jìn)行時(shí)是同時(shí)變化的，只從開始狀態(tài)到結(jié)束狀態(tài)變化一次耗溜； - 如果動(dòng)畫需要多次變化组力，則用百分?jǐn)?shù)的方式從
0%{動(dòng)畫開始時(shí)的樣式狀態(tài)}到100%{動(dòng)畫結(jié)束時(shí)的樣式狀態(tài)}，這之間可以隨意劃分抖拴，如25%{動(dòng)畫進(jìn)行到此時(shí)的樣式狀態(tài)}燎字。
定義動(dòng)畫的樣式名
實(shí)例代碼：
.fade {
animation: actionfirst linear 0.5s;
-webkit-animation: actionfirst linear 0.5s;
}
說明：
-
.fade為自己定義的樣式名或者樣式選擇器腥椒； -
animation為css設(shè)置動(dòng)畫屬性的一種簡寫屬性，可分為6個(gè)動(dòng)畫屬性：animation-name候衍、animation-duration笼蛛、animation-timing-function、animation-delay蛉鹿、animation-iteration-count滨砍、animation-direction -
actionfirst為需要綁定到此樣式或此選擇器的 keyframe 名稱，即第二步定義的動(dòng)畫名稱妖异； -
linear為動(dòng)畫速度曲線惋戏； -
0.5s為完成動(dòng)畫所花費(fèi)的時(shí)間，用秒或毫秒為單位
動(dòng)畫屬性表：
<table class="table" style="max-width:75em"><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td width="35%">animation-name</td><td>規(guī)定需要綁定到選擇器的 keyframe 名稱随闺。</td></tr><tr><td>animation-duration</td><td>規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間日川，以秒或毫秒計(jì)蔓腐。</td></tr><tr><td>animation-timing-function</td><td>規(guī)定動(dòng)畫的速度曲線矩乐。</td></tr><tr><td>animation-delay</td><td>規(guī)定在動(dòng)畫開始之前的延遲。</td></tr><tr><td>animation-iteration-count</td><td>規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)回论。</td></tr><tr><td>animation-direction</td><td>規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫散罕。</td></tr></tbody></table>
動(dòng)畫速率曲線表：
<table class="table" style="max-width:75em"><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td width="35%">linear</td><td>動(dòng)畫從頭到尾的速度是相同的。</td></tr><tr><td>ease</td><td>默認(rèn)傀蓉。動(dòng)畫以低速開始欧漱，然后加快，在結(jié)束前變慢葬燎。</td></tr><tr><td>ease-in</td><td>動(dòng)畫以低速開始误甚。</td></tr><tr><td>ease-out</td><td>動(dòng)畫以低速結(jié)束。</td></tr><tr><td>ease-in-out</td><td>動(dòng)畫以低速開始和結(jié)束谱净。</td></tr><tr><td>cubic-bezier(n,n,n,n)</td><td>在 cubic-bezier 函數(shù)中自己的值窑邦。可能的值是從 0 到 1 的數(shù)值壕探。</td></tr></tbody></table>
transition過渡
這里分享一些我的個(gè)人理解冈钦，vue.js官方網(wǎng)站上對“過渡效果”和“過渡狀態(tài)”有專業(yè)且詳細(xì)的介紹。
確定元素標(biāo)簽
查看并確定欲加過渡動(dòng)畫效果的元素標(biāo)簽李请，然后在其標(biāo)簽外再加一層<transition></transition>標(biāo)簽瞧筛，并且要在元素的標(biāo)簽上加v-if或v-show。實(shí)例代碼：
<transition name="widget-fade">
<div class="widget-body" :class="bodyCss" v-show="show">
<slot name="body"></slot>
</div>
</transition>
定義動(dòng)畫名稱
這里同上面的css動(dòng)畫第二步一樣较幌，通過css的創(chuàng)建動(dòng)畫規(guī)則@keyframes來定義動(dòng)畫白翻。元素進(jìn)入或離開的動(dòng)畫都在這一步驟中定義乍炉。實(shí)例代碼：
@keyframes widgetfirst {
from {
padding-top: 0;
padding-bottom: 0;
max-height: 0;
overflow: hidden;
}
to {
padding-top: 12px;
padding-bottom: 12px;
max-height: 1000px;
overflow: hidden;
}
}
@keyframes widgettwo {
from {
padding-top: 12px;
padding-bottom: 12px;
max-height: 1000px;
overflow: hidden;
}
to {
padding-top: 0;
padding-bottom: 0;
max-height: 0;
overflow: hidden;
}
}
過渡的css類名
實(shí)例代碼：
.widget-fade-enter-active {
animation: widgetfirst .5s ease;
}
.widget-fade-leave-active {
animation: widgettwo .3s linear;
}
這里vue官方給出的類名有四種，分別是：v-enter恩急、v-enter-active杉畜、v-leave衷恭、v-leave-active
1.v-enter: 定義進(jìn)入過渡的開始狀態(tài)此叠。在元素被插入時(shí)生效随珠，在下一個(gè)幀移除灭袁。
2.v-enter-active: 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入時(shí)生效窗看，在 transition/animation 完成之后移除茸歧。
3.v-leave: 定義離開過渡的開始狀態(tài)显沈。在離開過渡被觸發(fā)時(shí)生效，在下一個(gè)幀移除拉讯。
4.v-leave-active: 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)時(shí)生效只锭，在 transition/animation 完成之后移除院尔。
- 若在
transition標(biāo)簽中沒有寫name屬性蜻展，則類名中直接使用上述以v-開頭的就可以邀摆； - 若在
transition標(biāo)簽中寫了name屬性隧熙，則類名中的v-改為name屬性中定義的名字加-，如實(shí)例中所寫的贞盯。
