动画效果

1. 定义一个组件并注册

2. 给组件设置相应的数据与动画

3. 使用transition标签将需要实现动画效果的标签包裹起来

4. 设置好规定的样式名并写好需要的样式

   1. 若transition中使用name属性，则样式名以name值开头
   2. 若transition中未使用name属性，则使用默认样式名
   3. appear属性控制动画是否在页面加载初期执行一次样式变化

App组件

<template>
    <div class="container">
        <Test/>
    </div>
</template>
​
<script>
import Test from "@/components/Test.vue";
​
export default {
    name: 'App',
    components: {
        Test,
    },
}
</script>
​
<style></style>

Test组件

<script>
import {defineComponent} from 'vue'
​
export default defineComponent({
    name: "Test",
    data(){
        return{isShow:true}
    }
})
</script>
​
<template>
  <div>
      <button @click="isShow=!isShow">显示/隐藏</button>
      <transition appear>
          <h1 v-show="isShow">你好啊</h1>
      </transition>
  </div>
</template>
​
<style scoped>
h1{
    background-color: lightcoral;
}
.v-enter-active{
    animation: tittle 1s;
}
​
.v-leave-active{
    animation: tittle 1s reverse;
}
​
@keyframes tittle {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0px);
    }
}
​
</style>