1 动画效果

【代码】

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- <transition name="xxx" :appear="true">   可以指定name属性，也可以不指定，name属性在有多个动画的时候比较有用 --><transition :appear="true"><h1 v-show="isShow" class="hello">你好啊！</h1></transition></div>
</template><script>export default {name: 'Test',data() {return {isShow: true}}}
</script><style>.hello {background-color: skyblue;color: red;padding: 20px;}/* 动画 */.v-enter-active {animation: play .5s linear infinite;}.v-leave-active {animation: play .5s linear infinite;animation-direction: reverse;}@keyframes  play{from {transform: translateX(-100%);}to {transform: translateX(0px);}}
</style>

2 过渡效果

---

3 使用动画库实现动画效果

1.安装

npm install animate.css

2.导入

import 'animate.css';

3.使用