【vue中的动画使用】

<template>
  <div>
    <button @click="isShow = !isShow"></button>
    <!-- 安装插件可以直接引用 -->
    <!-- animate.css -->
    <!-- appear一进来就进行一次动画 -->
    <!-- 对应的group要有键值 -->
    <transiton-group appear name="改成插件定义的名字" enter-active-class="" leave-active-class="">
        <h2 v-show="isShow" key="1">我来啦！</h2>
        <h2 v-show="isShow" key="2">我走啦！</h2>
    </transiton-group>
  </div>
</template>

<script>
export default {
    name: '动画',
    data() {
        isShow: false;
    }
}
</script>

<style>
    h2 {
        background-color: #ccc;
    }
    /* 进入动画过程 */
    v-enter
    v-enter-active
    v-enter-to
    /* 离开动画过程 */
    v-leave
    v-leave-active
    v-leave-to
    @keyframes donghuaname {
        from{

        }
        to{
            
        }
    }
</style>