Vue.js之css實現過度動畫

來源：懂視網責編：小采時間：2020-11-27 20:01:12

Vue.js之css實現過度動畫

Vue.js之css實現過度動畫:這次給大家帶來Vue.js之css實現過度動畫，Vue.js的css實現過度動畫注意事項有哪些，下面就是實戰案例，一起來看一下。transition 動畫<template> <div> <button @click="show = !show">Togg

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue.js之css實現過度動畫:這次給大家帶來Vue.js之css實現過度動畫，Vue.js的css實現過度動畫注意事項有哪些，下面就是實戰案例，一起來看一下。transition 動畫<template> <div> <button @click="show = !show">Togg

這次給大家帶來Vue.js之css實現過度動畫，Vue.js的css實現過度動畫注意事項有哪些，下面就是實戰案例，一起來看一下。

transition 動畫

<template>
 <div>
 <button @click="show = !show">Toggle</button>
 <div class="ab">
 <transition name="adc">
 <p v-show="show">I am show</p>
 </transition>
 </div>
 </div></template><script>
 export default {
 data () { return { show: true
 }
 }
 }</script><style>
 .adc-enter-active, .adc-leave-active { transition: all 2s ease-out;
 } .adc-enter, .adc-leave-to { opacity: 0;
 }</style>

css-transform動畫

<template> <div> <button @click="show = !show">Toggle</button> <div class="ab"> <transition name="my-trans"> <p v-show="show">I am show</p> </transition> </div> </div></template><script> export default { data () { return { show: true } } }</script><style> .my-trans-enter-active, .my-trans-leave-active { transition: all .5s ease-out; } .my-trans-enter { transform: translateY(-100px); opacity: 0; } .my-trans-leave-active { transform: translateY(100px); }</style>

css-transform動畫

動態組件

<template>
 <div>
 <button @click="onToggle">Toggle</button>
 <div class="ab">
 <transition name="fade">
 //動態組件 <div :is="componentView"></div>
 </transition>
 </div>
 </div></template><script>
 import comA from './components/a.vue'
 import comB from './components/b.vue'
 export default { components: {comA, comB},
 data () { return { componentView: 'com-a'
 }
 }, methods: {
 onToggle () { if (this.componentView === 'com-a') { this.componentView = 'com-b'
 } else { this.componentView = 'com-a'
 }
 }
 }
 }</script><style>
 .fade-enter-active, .fade-leave-active { transition: all 2s ease-out;
 } .fade-enter, .fade-leave-to { opacity: 0;
 }</style>

動態組件,mode為默認

同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了過渡模式
in-out: 新元素先進行過渡，完成之后當前元素過渡離開。
out-in: 當前元素先進行過渡，完成之后新元素過渡進入。
默認情況下是in-out

上述動畫,如果設置mode="out-in"

<transition name="fade" mode="out-in"> <div :is="componentView"></div></transition>
mode="out-in"

注意:如果兩個標簽名相同,是不會執行動畫的,若想執行動畫,需要給標簽設置不同的key來加以區分

<template>
 <div>
 <button @click="show = !show">Toggle</button>
 <div class="ab">
 <transition name="fade" mode="out-in">
 <p v-if="show" >i am show</p>
 <p v-else >not in show</p>
 </transition>
 </div>
 </div></template>

兩個標簽名相同的動畫,未設置不同的key

如果設置了不同的key,就可以執行動畫了

<template>
 <div>
 <button @click="show = !show">Toggle</button>
 <div class="ab">
 <transition name="fade" mode="out-in">
 //設置不同的key <p v-if="show" key="1">i am show</p>
 <p v-else key="2">not in show</p>
 </transition>
 </div>
 </div></template>

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

Vue.js之css實現過度動畫

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 動畫實現

熱門焦點

Vue.js之css實現過度動畫

Vue.js之css實現過度動畫

Vue.js之css實現過度動畫

最新推薦

猜你喜歡

熱門推薦