## 過渡和動畫 #### Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果 #### Vue 提供了 transition 的封裝組件，在下列情形中，可以給任何元素和組件添加進入/離開過渡 條件渲染 (使用 v-if) 條件展示 (使用 v-show) 動態組件 組件根節點 ### 單元素/組件的過渡 ~~~ <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> ~~~ ~~~ new Vue({ el: '#demo', data: { show: true } }) ~~~ ~~~ .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } ~~~ https://cn.vuejs.org/images/transition.png 在進入/離開的過渡中，會有 6 個 class 切換。 * v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之后的下一幀移除。 * v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。 * v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之后移除。 * v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。 * v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。 * v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之后移除。 > 對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用 <transition name="my-transition" 可以重置前綴，比如 v-enter 替換為 my-transition-enter。 ~~~ <div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div> ~~~ ~~~ new Vue({ el: '#example-1', data: { show: true } }) ~~~ ~~~ /* 可以設置不同的進入和離開動畫 */ /* 設置持續時間和動畫函數 */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(10px); opacity: 0; } ~~~ 動畫 ~~~ <div id="example-2"> <button @click="show = !show">Toggle show</button> <transition name="bounce"> <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p> </transition> </div> ~~~ ~~~ new Vue({ el: '#example-2', data: { show: true } }) ~~~ ~~~ .bounce-enter-active { animation: bounce-in .5s; } .bounce-leave-active { animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } ~~~