Vue实现动画的几种方式

  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
}
  1. 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>
  1. 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({live: false}).init();
    });
  },
</script>
<div class="wow rollIn" />
  1. 原生css动画

你可能感兴趣的:(js,CSS,动画,css,javascript,vue)