<!-- Vue <transition> 多个组件的过渡案例2 -->
<template>
<div class="page">
<div class="text-center">
<input type="radio" v-model="view" value="componentA">a
<input type="radio" v-model="view" value="componentB">b
</div>
<transition
enter-active-class="animate__animated animate__backInDown"
leave-active-class="animate__animated animate__backOutDown animate__faster"
mode="out-in">
<!--
注意:animate__backOutDown动画,在高度不够的情况下,可能会出现滚动条闪烁的bug
-->
<component :is="view"></component>
</transition>
</div>
</template>
<script>
import componentA from '@/components/componentA'
import componentB from '@/components/componentB'
export default {
name: 'HelloWorld',
data() {
return {
view: 'componentA'
}
},
components: {
componentA, componentB
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
body {
margin: 0;
}
/*
/deep/ 为深度作用选择器
正常情况下,在scoped作用域下,.text-center无法影响到子组件componentA和componentB的样式
如果不加scoped又会影响到全局样式
此时,使用/deep/深度作用选择器,就可以在子组件中使用.text-center了
具体教程可参考:
https://www.jb51.net/article/188038.htm
*/
/deep/ .text-center {
text-align: center;
}
</style>
//在main.js中全局引入css
// animate.css官方文档 https://animate.style/
import '@/assets/css/animate.min.css'