标签:list ima style hub dev https color pre 使用动画
1. vue内置组件transition
元素出现和消失都呈现动画
<!-- 将要使用动画的内容放在transition里即可 --> <transition name="fade"> <div v-show="show"></div> </transition>
.fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-active { opacity: 0 }
2. animate.css插件
参照https://github.com/daneden/animate.css
加入类名时呈现动画
npm install animate.css --save
import animate from ‘animate.css‘
<div class="animated bounce delay-2s faster">Example</div>
3. wow.js
需引入animate,滚动到元素的位置展现动画
npm install wowjs --save-dev
<script> import { WOW } from "wowjs" import ‘animate.css‘ export default { mounted() { window.addEventListener("scroll", this.handleScroll); this.$nextTick(() => { new WOW().init(); }); }, </script>
<div class="wow rollIn" />
4. 原生css动画
标签:list ima style hub dev https color pre 使用动画
原文地址:https://www.cnblogs.com/223zzm/p/11335397.html