VueCLI核心知识4：动画效果、过渡效果

本文主要是介绍VueCLI核心知识4：动画效果、过渡效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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.使用

这篇关于VueCLI核心知识4：动画效果、过渡效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---