过渡与动画(完整代码)
main.js
import Vue from 'vue'
import App from './App.vue'
Vue. config. productionTip = false
new Vue ( {
el: '#app' ,
render : h => h ( App) ,
beforeCreate ( ) {
Vue . prototype. $bus = this
}
} )
App.vue
< template>
< div>
< Test />
< Test2 />
< Test3 />
</ div>
</ template>
< script>
import Test from './components/Test'
import Test2 from './components/Test2'
import Test3 from './components/Test3'
export default {
name: 'App' ,
components: {
Test,
Test2,
Test3
} ,
}
</ script>
组件
Test.vue
< template>
< div>
< button @click = " isShow = !isShow" > 显示/隐藏</ button>
< transition name = " hello" appear >
< h1 v-show = " isShow" > 你好啊!</ h1>
</ transition>
</ div>
</ template>
< script>
export default {
name: 'Test' ,
data ( ) {
return {
isShow: true
}
} ,
}
</ script>
< style scoped >
h1 {
background-color : orange;
}
.hello-enter-active {
animation : atguigu 0.5s linear;
}
.hello-leave-active {
animation : atguigu 0.5s linear reverse;
}
@keyframes atguigu {
from {
transform : translateX ( -100%) ;
}
to {
transform : translateX ( 0px) ;
}
}
</ style>
Test2.vue
< template>
< div>
< button @click = " isShow = !isShow" > 显示/隐藏</ button>
< transition-group name = " hello" appear >
< h1 v-show = " !isShow" key = " 1" > 你好啊!</ h1>
< h1 v-show = " isShow" key = " 2" > 尚硅谷!</ h1>
</ transition-group>
</ div>
</ template>
< script>
export default {
name: 'Test2' ,
data ( ) {
return {
isShow: true
}
} ,
}
</ script>
< style scoped >
h1 {
background-color : orange;
}
.hello-enter,
.hello-leave-to {
transform : translateX ( -100%) ;
}
.hello-enter-active,
.hello-leave-active {
transition : 0.5s linear;
}
.hello-enter-to,
.hello-leave {
transform : translateX ( 0) ;
}
</ style>
Test3.vue
< template>
< div>
< button @click = " isShow = !isShow" > 显示/隐藏</ button>
< transition-group appear name = " animate__animated animate__bounce" enter-active-class = " animate__swing"
leave-active-class = " animate__backOutUp" >
< h1 v-show = "