在Vue3中使用Transition發(fā)現(xiàn)動畫失效,看看問題的過程:
1歌豺、剛開始的寫法
結(jié)果發(fā)現(xiàn)動畫無效推穷,頁面沒有過渡效果,經(jīng)過仔細(xì)查看文檔类咧,發(fā)現(xiàn)在Vue3中需要加一個(gè)appear屬性馒铃,如下:
這樣,過渡動畫效果就可以了痕惋,另外注意Vue3中和Vue2中關(guān)于Router view的動畫包裹寫法是不一樣的区宇,Vue3中,Vue-router最新暴露了一個(gè)v-slot的插槽值戳,然后把Transiton組件包裹起來
最后提醒:Vue3的Fragment方式使得組件不再一定要在 一個(gè)元素的包裹下议谷,但是如果使用Transition的話,其頁面組件還是需要放在一個(gè)根標(biāo)簽中才有效堕虹,否則是無效的