VUE：過渡&動畫
阿新 • • 發佈：2018-11-15
VUE：過渡&動畫
vue動畫的理解
1）操作css的 trasition 或 animation
2）vue會給目標元素新增/移除特定的class
3）過渡的相關類名
xxx-enter-active：指定顯示的transition
xxx-leave-active：指定隱藏的transition
xxx-enter/xxx-leave-to：指定隱藏時的樣式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>10_過渡&動畫</title> <style> /* 顯示或隱藏的過濾效果 */ .xxx-enter-active,.xxx-leave-active{ transition: opacity 1s; } /* 隱藏時的樣式 */ .xxx-enter,.xxx-leave-to{ opacity: 0; } /*顯示的過濾效果 */ .move-enter-active{ transition: all 1s; } /* 隱藏的過濾效果 */ .move-leave-active{ transition: all 3s; } /* 隱藏時的樣式 */ .move-enter,.move-leave-to{ opacity: 0; transform: translateX(20px); } </style> </head> <body> <!-- 1.vue動畫的理解 操作css的trasition或animation vueh會給目標元素新增/移除特定的class 2.基本過渡動畫的編碼 1）在目標元素外包裹<transition name="xxx"></transition> 2）定義class樣式 1>.指定過渡樣式:transition 2>.指定隱藏時的樣式:opacity/其他 3）過渡的類名 xxx-enter-active：指定顯示的transition xxx-leave-active：指定隱藏的transition xxx-enter：指定隱藏時的樣式 --> <div id="test1"> <button @click="isShow=!isShow">toggle</button> <transition name='xxx'> <p v-show="isShow">hello</p> </transition> </div> <div id="test2"> <button @click="isShow=!isShow">toggle</button> <transition name='move'> <p v-show="isShow">hello</p> </transition> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> new Vue({ el:'#test1', data(){ return { isShow:true } } }) new Vue({ el:'#test2', data(){ return { isShow:true } } }) </script> </body> </html>