vue router 过度动画_vue-过度与动画

在开发过程中一般都用css动画，很少使用js动画，因为js动画非常消耗性能。 vue提供的动画方式

在 CSS 过渡和动画中自动应用 class

可以配合使用第三方 CSS 动画库，如 Animate.css

在过渡钩子函数中使用 JavaScript 直接操作 DOM

可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过渡的类名

1. v-enter：定义进入过渡的开始状态。
2. v-enter-active：定义进入过渡生效时的状态。
3. v-enter-to: 定义进入过渡的结束状态。
4. v-leave: 定义离开过渡的开始状态。
5. v-leave-active：定义离开过渡生效时的状态。
6. v-leave-to: 定义离开过渡的结束状态。

1.在 CSS 过渡和动画中自动应用 class 淡入淡出效果

<template>
  <div>
    <div id="demo">
      //show默认为true点击按钮取反
      <button v-on:click="show = !show">Toggle</button>
      //transition就是过度，所有需要过度效果的元素都需要放在transition里面
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
  </div>
</template>
<script>
    export default {
        name: "Anim",
        data(){
          return{
            show:true
          }
        }
    }
</script>
<style scoped>
 /* v代表transition上面的name */
 .fade-enter,.fade-leave-to{
    font-size:16px;
    opacity:0;
 }
 .fade-enter-active,.fade-leave-active{
   transition:all 2s;
 }
 .fade-enter-to,.fade-leave{
   font-size:30px;
   opacity:1;
 }
</style>

2.可以配合使用第三方 CSS 动画库，如 Animate.css

在index.html里引入动画库

Swiper Animate 地址

Swiper使用方法 > swiperAnimate 使用方法​www.swiper.com.cn

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<template>
  <div>
    <div id="demo">
      //show默认为true点击按钮取反
      <button v-on:click="show = !show">Toggle</button>
      //name属性就是自定义   
      //enter-active-class进入
      //leave-active-class离开
      //animated 动画名称
       //tada效果
      <transition name="custom-classes-transition" 
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight">
        <p v-if="show">hello</p>
      </transition>
    </div>
  </div>
</template>
<script>
    export default {
        name: "Anim",
        data(){
          return{
            show:true
          }
        }
    }
</script>
<style scoped>
</style>