Vue - transition过渡动画

自定义过渡动画

enter-class

enter-active-class

leave-class

leave-active-class

<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升级，需要注意版本号

npm i --save-dev animate.css@4.1.1
npm i --save-dev animate.css@3.7

main.js引入挂载

import Vue from 'vue';
import animate from 'animate.css';

Vue.use(animate)

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

<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以下版本