Vue009_过渡动画
生活随笔
收集整理的這篇文章主要介紹了
Vue009_过渡动画
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?vue ?動畫的理解
1) 操作 css 的 trasition 或 animation
2) vue 會給目標元素添加/移除特定的 class
3) 過渡的相關(guān)類名
xxx-enter-active: 指定顯示的 transition
xxx-leave-active: 指定隱藏的 transition
xxx-enter/xxx-leave-to: 指定隱藏時的樣式
? 基本過渡動畫的編碼
1) 在目標元素外包裹<transition name="xxx">
2) 定義 class 樣式
指定過渡樣式: transition
指定隱藏時的樣式: opacity/其它?
?
編碼示例
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.fade-enter-active, .fade-leave-active {transition: opacity .5s;}.fade-enter, .fade-leave-to {opacity: 0;}/* 可以設(shè)置不同的進入和離開動畫 */.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-enterm ,.slide-fade-leave-to {transform: translateX(10px);opacity: 0;}</style></head><body><div id="demo1"><button @click="show = !show">JD1</button><!-- 元素作為單個元素/組件的過渡效果。 只會把過渡效果應(yīng)用到其包裹的內(nèi)容上，而不會額外渲染 DOM 元素，也不會出現(xiàn)在檢測過的組件層級中。 --><transition name="fade"><p v-if="show">hello</p></transition></div><div id="demo2"><button @click="show = !show">JD2</button><transition name="slide-fade"><p v-if="show">hello</p></transition></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">new Vue({el: '#demo1',data: {show: true}})new Vue({el: '#demo2',data: {show: true}})</script></body> </html>結(jié)果展示
代碼示例
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.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);}</style></head><body><div id="test2"><button @click="show = !show">JD show</button><br /><transition name="bounce"><!-- inline-block => 該元素生成一個塊元素框，該框與周圍的內(nèi)容一起流動，就好像它是單個內(nèi)聯(lián)框一樣，并且行為類似于被替換的元素 --><p v-if="show" style="display: inline-block;">Look at me</p></transition></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#test2',data: {show: true}})</script></body> </html>?結(jié)果展示
總結(jié)
以上是生活随笔為你收集整理的Vue009_过渡动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue008_ Vue实例生命周期
- 下一篇： Vue010_ 过滤器