Vue.js之css实现过度动画

来源：保埃科技网

这次给大家带来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实现过度动画