Vue ＜transition＞ 多个组件的过渡案例2

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