使用動畫效果要用transition包裹，transition(<trsnsition name="xx"><div></div></transition>)是將所包裹的單個元素賦予過渡效果。當元素被transition包裹之後，vue會自動分析裏面元素的css樣式，然後構建一個動畫流程

顯示：

在動畫即將執行的瞬間，會在內部元素上面增加兩個class(xx-enter, xx-enter-active),當動畫第一幀執行結束後，發現有動畫效果，vue在動畫運行到第二幀的時候，去掉xx-enter類，加上xx-enter-to類，接著當動畫結束時vue會把之前添加的xx-enter-active，xx-enter-to去掉.

隱藏：

使用css3動畫@keyframes,自定義類名

使用Animate.css庫

ps:刷新即顯示動畫

同時使用transition過渡動畫和css動畫，設置優先時間

自定義動畫播放時長 :duration="10000" 持續10s

自定義復雜動畫播放時長:入場時間，出場時間

使用js鉤子實現入場動畫

使用js鉤子實現出場動畫

使用Velocity.js實現動畫

多個元素的過渡效果

ps：out-in先隱藏再展示 in-out先展示在隱藏

多個組件的過渡效果

列表過渡

動畫封裝

初學vue----動畫過渡transition簡單部分