自定义过渡动画

  • enter-class
  • enter-active-class
  • leave-class
  • leave-active-class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
	  <button @click="change">dianwo</button>
    <transition
      name="fade"
      enter-class="fade-enter"
      enter-active-class="fade-enter-active"
      leave-class="fade-leave"
      leave-active-class="fade-leave-active"
    >
      <router-view v-if="show"></router-view>
    </transition>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      show: true
    }
  },
  methods: {
    change() {
      this.show = !this.show
    }
  }
}
</script>
<style>
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.fade-leave,
.fade-enter-active {
  opacity: 1;
  transition: opacity 5s ease-in;
}
 <style>

自定义函数过渡动画

animate.css 动画

  • 下载 animate.css 动画库
  • 全局引入
  • transition 调用

由于 animate.css 升级，需要注意版本号

1
2
npm i --save-dev animate.css@4.1.1
npm i --save-dev animate.css@3.7
1
2
3
4
import Vue from "vue";
import animate from "animate.css";

Vue.use(animate);

本人目前使用animate.css@4.1.1，需要按照下面方法调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <Layout>
    <button @click="change">dianwo</button>
    <!-- 老版animate-->
    <transition
      enter-active-class="animated bounceInLeft"
      leave-active-class="animated bounceOutRight"
    >
      <router-view v-if="show"></router-view>
    </transition>
     <!-- 新版animate-->
    <transition
      enter-active-class="animate__animated animate__bounceInLeft"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <router-view v-if="show"></router-view>
    </transition>
  </Layout>
</template>
<script>
import Layout from '@/components/layout'
export default {
  name: 'App',
  data() {
    return {
      show: true
    }
  },
  components: {
    Layout
  },
  methods: {
    change() {
      this.show = !this.show
    }
  }
}
</script>
<style>
@import url('./assets/css/reset.css');
@import url('./assets/css/common.css');
@import url('./assets/css/style.css');
</style>

注意：

由于 animate.css 演示效果时，我们复制的代码没有前缀，建议使用 animate4.x 以下版本