Vue.js之css實(shí)現(xiàn)過(guò)度動(dòng)畫(huà)

<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>

<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>

<template>
 <div>
 <button @click="onToggle">Toggle</button>
 <div class="ab">
 <transition name="fade">
 //動(dòng)態(tài)組件 <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>

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

<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>

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