第如何利用vue實(shí)現(xiàn)css過渡和動(dòng)畫});

//js

constapp=Vue.createApp({

components:[item-a,item-b],

data(){

return{

component:item-a

methods:{

handleClick(){

if(ponent===item-a){

ponent=item-b

}else{

ponent=item-a

template:`

transitionmode=out-inappear

component:is=component/

/transition

button@click=handleClick切換/button

ponent(item-a,{

template:`divhello/div`

ponent(item-b,{

template:`divbye/div`

});

四、組件和元素切換動(dòng)畫的實(shí)現(xiàn)

mode-string控制離開/進(jìn)入過渡的時(shí)間序列。

有效的模式有先出后進(jìn)：out-in和先進(jìn)后出：in-out；默認(rèn)同時(shí)進(jìn)行。

可以通過appearattribute設(shè)置節(jié)點(diǎn)在初始渲染的過渡。

/*css*/

.v-enter-from,

.v-leave-to{

opacity:0;

.v-enter-active,

.v-leave-active{

transition:opacity1sease-in;

.v-enter-to,

.v-leave-from{

opacity:1;

}

//js

constapp=Vue.createApp({

components:[item-a,item-b],

data(){

return{

component:item-a

methods:{

handleClick(){

if(ponent===item-a){

ponent=item-b

}else{

ponent=item-a

template:`

transitionmode=out-inappear

component:is=component/

/transition

button@click=handleClick切換/button

ponent(item-a,{

template:`divhello/div`

ponent(item-b,{

template:`divbye/div`

});

五、列表動(dòng)畫

使用transition-group組件，可以同時(shí)渲染整個(gè)列表。

內(nèi)部元素總是需要提供唯一的keyattribute值。

CSS過渡的類將會(huì)應(yīng)用在內(nèi)部的元素中，而不是這個(gè)組/容器本身。

transition-group組件還有一個(gè)特殊之處。不僅可以進(jìn)入和離開動(dòng)畫，還可以改變定位。要使用這個(gè)新功能只需使用新增的v-move類。

/*css*/

.inline-block{

display:inline-block;

margin-right:10px;

.v-enter-from,

.v-leave-to{

opacity:0;

transform:translateY(30px);

.v-enter-active{

transition:all1sease;

.v-leave-active{

position:absolute;

.v-move{

transition:all1sease;

}

六、狀態(tài)動(dòng)畫

對(duì)于數(shù)據(jù)元素本身而言，通過數(shù)字和運(yùn)算、顏色的顯示、SVG節(jié)點(diǎn)的位置、元素的大小和其他的property這些屬性的變化，同樣可以實(shí)現(xiàn)動(dòng)畫的效果。

數(shù)字變化示例：

constapp=Vue.createApp({

data(){

return{

number:1

methods:{

handleClick(){

consttimer=setInterval(()={

if(this.number=10){

clearInterval(timer)

}else{

this