Vue ＜transition＞多个元素过渡 css过渡使用案例

<!-- Vue <transition>多个元素过渡 css过渡使用案例 -->
<!--
<transition>过渡应用于元素的切换效果：
  1、元素的显示或隐藏
  2、从一个元素切换到另一个元素
-->
<template>
  <div class="page">
    <transition enter-active-class="animate__animated animate__flash">
      <button :key="docState" @click="docState = 'save'">
        {{buttonMessage}}
      </button>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        docState: 'edit'
      }
    },
    computed: {
      buttonMessage(){
        switch(this.docState){
          // case n 实例、具体情况
          case 'edit': return '编辑'
          case 'cancel': return '取消'
          case 'save': return '保存'
        }
      }
    },
    methods: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>

//在main.js中全局引入css
// animate.css官方文档 https://animate.style/
import '@/assets/css/animate.min.css'