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.css2.导入
import 'animate.css';3.使用文章来源：https://www.toymoban.com/news/detail-827580.html
文章来源地址https://www.toymoban.com/news/detail-827580.html
到了这里，关于VueCLI核心知识4：动画效果、过渡效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
