過渡效果在交互體驗中的重要性不言而喻。以前我們使用js或者Jquery來添加或者移除元素的類，配合CSS中定義的樣式，再引用壹些javascript庫，就可以做出非常復雜和驚艷的動態效果，但是這種方法還是太繁瑣了。
Vue.js內置了轉場系統，可以在DOM中插入或移除元素時自動應用轉場效果。Vue在是當事人的時候會觸發css轉場或者動畫，妳也可以提供相應的javascript鉤子函數，在轉場的時候執行自定義的DOM操作。
對於每個過渡效果，您需要在目標元素上使用transition屬性。
& ltp v-if = " show " transition = " my-style " >顯示
1.v-if 2.v-show 3.v-for 4。動態組件
還有其他的說明或者資源可以自己找。
完整的代碼示例如下:
& ltp v-if = " show ":transition = " expand " >& lt/p & gt；// expand必須事先定義，使用expand後的書寫風格(key)。
& lttransition name="expand " >& ltp v-if="show " >顯示
。必須編寫expand-transition {//代碼。
轉場:所有. 3s ease
高度:30px
填充:10px；
背景色:# eee
溢出:隱藏；
}
。expand-enter{ //開始進入轉場，元素插入生效。
過渡:不透明度. 5s；
}
。fade-leave-active {//結束狀態
不透明度:0；
}當然，有開始就要有結束的狀態。事實上，有四個(CSS類)名稱在進入/離開狀態下切換。
1.v-enter:定義過渡的起始狀態，當元素在下壹幀插入和移除時生效。
2.v-enter-active:定義過渡的結束狀態，該狀態在元素被插入時生效，並在過渡/動畫完成後被移除。
3.v-leave:定義離開轉場的起始狀態，當觸發離開轉場時生效，並在下壹幀移除。
4.v-leave-active:定義了離場過渡的起始狀態，當離場過渡被觸發時生效，在下壹幀被移除。
根據以上四種狀態，完全可以寫出壹個css的過渡效果，比如頁面從窗口左側進入。是不是很酷？
以上是我為大家整理的，希望以後對大家有幫助。
相關文章:
如何構建元素界面(詳細教程)
如何在angular中基於ng-alain定義自己的select組件？
如何在elementui中修改默認樣式
使用elementUI在Vue中實現自定義主題方法
plotly.js圖庫使用教程詳解(詳細教程)
如何在elementui中修改默認樣式？