【Vue基础】过渡与动画

本专栏将从基础开始，循序渐进的讲解Vue的基本概念以及使用，希望大家都能够从中有所收获，也请大家多多支持。
专栏地址: Vue专栏
相关软件地址: 相关安装包地址
如果文章知识点有错误的地方，请指正！大家一起学习，一起进步。

1 过渡与动画

1.1 自定义动画

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。
2. v-enter-active：定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：定义进入过渡的结束状态。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：定义离开过渡的结束状态。

其中v是定义的transition标签的名字,具体的动画过程如下图所示,其中Opacity是透明度的意思:

• 使用示例:

<template>
  <div class="anim">
    <button v-on:click="show = !show">Button</button>
<!--    淡入淡出-->
    <transition name="myFade">
      <h1 v-if="show">hello</h1>
    </transition>
<!--    变大变小-->
    <transition name="trans">
      <h1 class="big" v-if="show">hello</h1>
    </transition>
<!--    动画-->
    <transition name="myAni">
      <h1 class="big" v-if="show">hello</h1>
    </transition>

  </div>
</template>

<script>
export default {
    
    
  name: "animDemo",
  data(){
    
    
    return{
    
    
      show:true
    }
  }
}
</script>

<style scoped>

/*淡入淡出效果*/
/*Opacity为0的状态*/
.myFade-enter,.myFade-leave-to{
    
    
  opacity: 0;
}

    /*淡入淡出效果*/
/*Opacity为1的状态*/
.myFade-enter-to,.myFade-leave{
    
    
  opacity: 1;
}

    /*淡入淡出效果*/
/*过渡*/
.myFade-enter-active,.myFade-leave-active{
    
    
  transition: opacity 3s;
}

.big{
    
    
  width: 100px;
  height: 100px;
  background: aquamarine;
}

/*变大变小*/
/*Opacity为0的状态*/
.trans-enter,.trans-leave-to{
    
    
  opacity: 0;
  width: 0;
  height: 0;
}

    /*变大变小*/
/*Opacity为1的状态*/
.trans-enter-to,.trans-leave{
    
    
  opacity: 1;
  width: 100px;
  height: 100px;
}

    /*变大变小*/
/*过渡*/
.trans-enter-active,.trans-leave-active{
    
    
  transition: all 3s;
}

/*动画*/
/*Opacity为0的状态*/
.myAni-enter,.myAni-leave-to{
    
    

}

    /*动画*/
/*Opacity为1的状态*/
.myAni-enter-to,.myAni-leave{
    
    

}

    /*动画*/
/*过渡*/
.myAni-enter-active{
    
    
  animation: bounce-in 1s;
}

.myAni-leave-active{
    
    
  animation: bounce-out 1s;
}

/*关键帧动画,show=true*/
@keyframes bounce-in {
    
    
  0%{
    
    
    transform: scale(0);
  }
  50%{
    
    
    transform: scale(1.5);
  }
  100%{
    
    
    transform: scale(1);
  }
}

/*关键帧动画,show=false*/
@keyframes bounce-out {
    
    
  0%{
    
    
    transform: scale(1);
  }
  50%{
    
    
    transform: scale(1.5);
  }
  100%{
    
    
    transform: scale(0);
  }
}

</style>

1.2 使用第三方动画

• 引入第三方动画js

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

如下图所示:

• 从以下网址选取想要的样式:

https://www.swiper.com.cn/usage/animate/index.html

• 使用样式:

代码如下图:

<transition
  name="custom-classes-transition"
  enter-active-class="animated rotateIn"
  leave-active-class="animated zoomOutDown"
>
  <h1 class="big" v-if="show">hello</h1>
</transition>

需要注意的是,如果不脱离文档流,页面会发生抖动,如下图右边栏所示:

所以需要通过div把动画脱离文档流,代码如下所示:

<transition
      name="custom-classes-transition"
      enter-active-class="animated rotateIn"
      leave-active-class="animated zoomOutDown"
>
.big{
    
    
  width: 100px;
  height: 100px;
  background: aquamarine;
  /*脱离文档流*/
  position:fixed;
}