這篇文章主要介紹了vue元素實現動畫過渡效果,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧
1 在vue 中,使用 300ff3b250bc578ac201dd5fb34a0004
標籤包含著的單一子元素在使用v-show
或 v-if
切換顯示隱藏前,會先判斷是否有對應的 class
樣式能符合到該子元素上:
<script src="/public/javascripts/vuejs"></script> <style> red {background-color: red; width: 100px; height: 100px;} redv-leave { margin-top: 50px; } redv-leave-active { transition: all 3s;} redv-leave-to { margin-top: 100px; opacity: 0;} redv-enter { margin-top: 50px; } redv-enter-active { transition: all 3s;} redv-enter-to { margin-top: 10px; opacity: 0;} </style> <body> <p id="app"> <transition> <p class="red" v-show="show"></p> </transition> <button v-on:click="change">button</button> </p> <script> new Vue({ el: '#app', data: { show: true }, methods: { change: function(){ thisshow = !thisshow; } } }); </script> </script> </body>
v-leave 目前元素準備從顯示轉變成隱藏,在動畫開始前添加到元素上,動畫一旦開始會立即刪除;
2 自訂動畫類別名稱:
<script src="/public/javascripts/vuejs"></script> <style> red {background-color: red; width: 100px; height: 100px;} redslide-leave { margin-top: 50px; } redslide-leave-active { transition: all 3s;} redslide-leave-to { margin-top: 100px; opacity: 0;} redslide-enter { margin-top: 50px; } redslide-enter-active { transition: all 3s;} redslide-enter-to { margin-top: 10px; opacity: 0;} </style> <body> <p id="app"> <transition name="slide"> <p class="red" v-show="show"></p> </transition> <button v-on:click="change">button</button> </p> <script> new Vue({ el: '#app', data: { show: true }, methods: { change: function(){ thisshow = !thisshow; } } }); </script>此效果與上一例效果完全一致的,
transition 元素可以使用
name 屬性來指定使用的類別名稱前綴,從而代替
v-字段,例如事例中的
name="slide" 使本來的
v-enter 變成了
slide-enter。
3 transition 與animation 同時使用時
<script src="/public/javascripts/vuejs"></script> <style> @keyframes aslide { 0% { margin-left: 10px; } 100% { margin-left: 100px; } } red {background-color: red; width: 100px; height: 100px;} blue {background-color: blue; width: 100px; height: 100px;} v-leave { margin-top: 50px; } v-leave-active { transition: all 3s; animation: aslide 5s;} v-leave-to { margin-top: 100px;} </style> <body> <p id="app"> <transition type="transition" > <p class="red" v-show="show"></p> </transition> <br> <transition type="animation" > <p class="blue" v-show="show"></p> </transition> <button v-on:click="change">button</button> </p> <script> new Vue({ el: '#app', data: { show: true }, methods: { change: function(){ thisshow = !thisshow; } } }); </script>事例中,動畫同時指定了transition 和animation 動畫,transition 元素的type 屬性可以指定以哪種動畫的時間為元素的結束時間,如果不指定動畫監控的方式,則會以最長時間的為準。
4 javascript 監聽動畫
<script src="/public/javascripts/vuejs"></script> <style> red {background-color: red; width: 100px; height: 100px;} v-leave { margin-top: 50px; } v-leave-active { transition: all 3s;} v-leave-to { margin-top: 100px;} </style> <body> <p id="app"> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <p class="red" v-show="show"></p> </transition> <button v-on:click="change">button</button> </p> <script> new Vue({ el: '#app', data: { show: true }, methods: { change: function() { thisshow = !thisshow; consolelog('-----------click---------'); }, beforeEnter: function (el) { consolelog('beforeEnter:'); }, enter: function (el, done) { consolelog('enter:'); // done() }, afterEnter: function (el) { consolelog('afterEnter:'); }, enterCancelled: function (el) { consolelog('enterCancelled:'); }, beforeLeave: function (el) { consolelog('beforeLeave:'); }, leave: function (el, done) { consolelog('leave:'); done() }, afterLeave: function (el) { consolelog('afterLeave:'); }, leaveCancelled: function (el) { consolelog('leaveCancelled:'); } } }); </script>
5 頁面初始化時的動畫:
<script src="/public/javascripts/vuejs"></script> <style> @keyframes aslide { 0% { margin-left: 10px; } 100% { margin-left: 100px; } } red {background-color: red; width: 100px; height: 100px;} apper { margin-top: 50px; } apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;} </style> <body> <p id="app"> <transition appear appear-class="apper" appear-active-class="apper-active" v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" > <p class="red" ></p> </transition> <button v-on:click="change">button</button> </p> <script> new Vue({ el: '#app', data: { show: true }, methods: { change: function() { thisshow = !thisshow; consolelog('-----------click---------'); }, customBeforeAppearHook: function (el) { consolelog('customBeforeAppearHook:'); }, customAppearHook: function (el) { consolelog('customAppearHook:'); // done() }, customAfterAppearHook: function (el) { consolelog('customAfterAppearHook:'); } } }); </script>
<script src="/public/javascripts/vuejs"></script> <style> v-enter-active { transition: all 15s;} v-enter-to { margin-top: 100px;} v-leave-active { transition: all 15s;} v-leave-to { margin-top: 10px;} </style> <body> <p id="app"> <p class="show1"> <transition> <button v-if="show1" @click="show1 = false">on</button> <button v-else @click="show1 = true">off</button> </transition> </p> <p class="show2"> <transition> <button v-if="show2" key="on" @click="show2 = false">on</button> <button v-else key="off" @click="show2 = true">off</button> </transition> </p> </p> <script> var app = new Vue({ el: '#app', data: { show1: true, show2: true } }); </script>
before-appear appear after-appear 是事件回調,看事例相當清晰。
6 動畫元素的 key :
<script src="/public/javascripts/vuejs"></script> <style> v-enter { margin-left: 100px;} v-enter-active { transition: all 5s;} v-enter-to { margin-left: 10px;} v-leave { margin-left: 10px;} v-leave-active { transition: all 5s;} v-leave-to { margin-left: 100px;} </style> <body> <p id="app"> <p class="default"> <transition> <button v-if="show" key="on" @click="show = false">on</button> <button v-else key="off" @click="show = true">off</button> </transition> </p> <p class="inout"> <transition mode="in-out"> <button v-if="show" key="on" @click="show = false">on</button> <button v-else key="off" @click="show = true">off</button> </transition> </p> <p class="outin"> <transition mode="out-in"> <button v-if="show" key="on" @click="show = false">on</button> <button v-else key="off" @click="show = true">off</button> </transition> </p> </p> <script> var app = new Vue({ el: '#app', data: { show: true } }); </script>
show1 為什麼沒有動畫效果呢?因為vue 會把切換中的兩個button 辨識成同一個元素,只是修改了button 中的不同內容,所以實際上頁面並沒有發生DOM 元素的切換;
###如果要讓vue明確辨識出這是2個不同的button 元素,則為每個元素指定不同的key 屬性的值。 ############7 元素切換的動畫模式:######<script src="/public/javascripts/vuejs"></script> <style> v-enter { margin-left: 100px;} v-enter-active { transition: all 5s;} v-enter-to { margin-left: 10px;} v-leave { margin-left: 10px;} v-leave-active { transition: all 5s;} v-leave-to { margin-left: 100px;} </style> <body> <p id="app"> <p class="default"> <transition> <button v-if="show" key="on" @click="show = false">on</button> <button v-else key="off" @click="show = true">off</button> </transition> </p> <p class="inout"> <transition mode="in-out"> <button v-if="show" key="on" @click="show = false">on</button> <button v-else key="off" @click="show = true">off</button> </transition> </p> <p class="outin"> <transition mode="out-in"> <button v-if="show" key="on" @click="show = false">on</button> <button v-else key="off" @click="show = true">off</button> </transition> </p> </p> <script> var app = new Vue({ el: '#app', data: { show: true } }); </script>
transition 默认是同时执行2个元素的切换动画的,案例中红色的 off 按钮其实是会同时向左移动的,只是因为布局上没有脱离布局流,被 on 按钮顶住,无法移动;
mode="in-out" 可以使切换元素先执行将要显示元素的动画,再执行将要隐藏元素的动画;
mode="out-in" 可以使切换元素先执行将要隐藏元素的动画,再执行将要显示元素的动画;
8 多元素动画:
<script src="/public/javascripts/vuejs"></script> <style> v-enter { margin-left: 100px;} v-enter-active { transition: all 2s;} v-enter-to { margin-left: 10px;} </style> <body> <p id="app"> <transition-group> <li v-for="item in items" :key="item">{{item}}</li> </transition-group> <transition-group tag="ul"> <li v-for="item in items" :key="item">{{item}}</li> </transition-group> <button @click="itemspush(itemslength)">add</button> </p> <script> var app = new Vue({ el: '#app', data: { items: [0,1] } }); </script>
transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素,要想使用多个元素的动画,必须使用 transition-group;
transition-group 默认会在 DOM 里渲染成 span 标签,可使用 tag="ul" 指定渲染成其他标签;
transition-group 必须为每一个子元素指定 key;
8 多元素的位移动画:
<script src="/public/javascripts/vuejs"></script> <style> v-move { transition: all 1s; } </style> <body> <p id="app"> <transition-group tag="ul" > <li v-for="item in items" :key="item">{{item}}</li> </transition-group> <button @click="itemsreverse()">reverse</button> </p> <script> var app = new Vue({ el: '#app', data: { items: [0,1,2,3] } }); </script>
transition-group 允许在每个元素移动时,添加 v-move 的样式,移动完成后自动清除该样式;
transition 的属性, transition-group 都有,包括 name enter leave;
以上是vue元素實作動畫過渡效果實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!