透過vuejs中的transition元素可以實現過渡動畫,它有六個類別可以應用到標記中分別處理進入和離開過渡
VueJS(Vue.js)可以說是一個非常好的前端Javascript框架。它易於使用,擴展和自訂,可以滿足我們的需求。尤其是vue.js中的過渡功能,它使得動畫過程變得輕而易舉。接下來在文章中將為大家具體介紹如何實作vue.js過渡動畫。具有一定的參考價值,希望對大家有幫助
【推薦課程:vue.js教學】
Vue.js中有一個
在CSS轉換的情況下,元素負責應用和取消應用程式類別。我們要做的就是定義元素在轉換期間的外觀
語法如下:
<transition name = "nameoftransition"> <div></div> </transition>
過渡元素將六個類別應用於您的標記,您可以使用它們分別處理您的進入和離開過渡。當元素被顯示時,有三個類別來處理A到B的轉換,另外三個類別來處理元素被移除時的A到B轉換。
啟用或顯示元件時會發生輸入轉換: v-enter,v-enter-active,v-enter-to
v-enter:表示進入過渡的開始狀態。在元素被插入之後的下一幀移除
v-enter-active:表示過渡生效時的狀態,在動畫完成後移除
v-enter-to:進入過渡的結束狀態,在動畫完成後移除
離開轉換是在停用或刪除元件時:v-leave,v-leave-active,和v-leave-to
v-leave: 表示離開過渡的開始狀態,下一幀被移除
v-leave-active:表示離開過渡生效時的狀態,在整個離開過渡的階段中應用,在過渡/動畫完成之後移除。這個類別可以用來定義離開過渡的過程時間,延遲和曲線函數
v-leave-to: 表示離開過渡的結束狀態,在過渡/動畫完成之後移除
#例如:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> </title> <script src="https://vuejs.org/js/vue.js"></script> <style> /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .slide-fade-enter-active { transition: all .5s ease; } .slide-fade-leave-active { transition: all 3s linear; font-size:30px; background-color: pink; } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active 用于 2.1.8 以下版本 */ { transform: translateX(40px); opacity:0.2; } </style> </head> <body> <div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name="slide-fade"> <p v-if="show">php中文网</p><!-- 为true就显示,不是true就不显示 --> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script> </body> </html>
效果圖:
#總結:以上就是這篇文章的全部內容了,希望透過這篇文章可以幫助大家學會聽過vue.js創造過渡動畫
以上是如何實作Vuejs過渡動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!