Vue——过渡与动画

Vue的动画效果

动画的定义和样式还是先用css写好，vue帮助我们在合适的事件调用动画效果。

原生css实现动画

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>

    <h1 v-show="isShow" class="come">你好呀</h1>
    <h1 v-show="isShow" class="go">你好呀</h1>
  </div>
</template>

<script>
export default {
    name: 'TestVue',
    data() {
        return {
            isShow:true
        }
    }
}
</script>

<style scoped>
h1{
    background: lightsalmon;
}

.come{
  animation: yang 1s;
}
.go {
  animation: yang 1s reverse;
}

/* 定义动画 */
@keyframes yang {
  from{
    transform: translateX(-100%);
  }
  to {
      transform: translateX(0px);
    }
}

</style>

动画效果如下:

上面的是.come的样式
下面的是.go的样式

使用vue实现动画

使用vue实现如下动画效果：
即显示的时候文字从左向右滑入，隐藏的时候从右向左滑出。
其实滑入滑出的样式类vue已经定义好了，需要我们做的就是配置指定样式类。

实现方法：

• 在vue模板中对于有动画效果的标签使用 <transition></transition>进行包裹
• 使用vue为我们提供好的类名引用动画：
  .v-enter-active类：元素进入过程中的类
  .v-leave-active类：元素离开过程中的类
  直接在上面两个类中引用动画就可以为模板中使用<transition>包裹的元素添加上进入和离开动画，无需在模板中给元素配置对应类名。

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition>
      <h1 v-show="isShow">你好呀</h1>
    </transition>
  </div>
</template>
<script>
export default {
    name: 'TestVue',
    data() {
        return {
            isShow:true
        }
    }
}
</script>
<style scoped>
h1{
    background: lightsalmon;
}

.v-enter-active {
  animation: yang 1s;
}

.v-leave-active {
  animation: yang 1s reverse;
}

/* 定义动画 */
@keyframes yang {
  from{
    transform: translateX(-100%);
  }
  to {
      transform: translateX(0px);
    }
}

</style>

transition标签的属性

appear

appear属性为true时表示初始进入页面就有动画效果
两种写法：

• 声明为true，要使用 v-bind

    <transition :appear="true">
      <h1 v-show="isShow">你好呀</h1>
    </transition>

• 直接写appear

    <transition appear>
      <h1 v-show="isShow">你好呀</h1>
    </transition>

实现效果如下

name

transition可以有name属性，但是如果transition设置了name属性，对应的动态类属性的名字也要及进行改变，将v替换为transition的name

即如果transition的name是hello，那么两个动态类名应该是：.hello-enter-active和.hello-leave-active
eg：

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>

    <transition name="hello">
      <h1 v-show="isShow">你好呀</h1>
    </transition>

  </div>
</template>
<script>
export default {
    name: 'TestVue',
    data() {
        return {
            isShow:true
        }
    }
}
</script>
<style scoped>


h1{
    background: lightsalmon;
}

.hello-enter-active {
  animation: yang 1s;
}

.hello-leave-active {
  animation: yang 1s reverse;
}

/* 定义动画 */
@keyframes yang {
  from{
    transform: translateX(-100%);
  }
  to {
      transform: translateX(0px);
    }
}

</style>

设置 name属性可以实现不同的 <transition> 设置不同的动态样式

transition的编译

编译的时候 transition标签不会被编译进去， transition只是vue的一个标签

Vue的过渡效果

变换

过渡效果需要配合元素的变换才能实现。
对于元素的进入进出变换我们一般直接使用vue提供的如下类实现：

• v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
• v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
• v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
• v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

过渡

过渡实现：

• 对于进入的过渡效果需要依赖vue提供的两个类.v-enter(进入的起点)和.v-enter-to（进入的终点）；对于离开的过渡效果需要依赖.v-leave(离开的起点)和.v-leave-to（离开的终点）
• 也需要结合 <transition></transition>，对于有样式变化的标签使用<transition>进行包裹
• 使用transition: 0.5s;指定变换的事件和样式的过渡效果，谁变就给谁配置transition。

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="hello">
      <h1 v-show="isShow">你好呀</h1>
    </transition>
  </div>
</template>
<script>
export default {
    name: 'TestVue',
    data() {
        return {
            isShow:true
        }
    }
}
</script>
<style scoped>
h1{
    background: lightsalmon;
    /* 谁变给谁配置transition */
    /* 定义变换时间 */
     transition: 0.5s;
}
/* 进入的起点 */
.hello-enter{
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}
/* 离开的起点 */
.hello-leave {
  transform: translateX(0);
}

/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}

</style>

• 也可以直接在.hello-enter-active（表示元素进入过程中）类中，来配置过渡效果

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="hello">
      <h1 v-show="isShow">你好呀</h1>
    </transition>

  </div>
</template>
<script>
export default {
    name: 'TestVue',
    data() {
        return {
            isShow:true
        }
    }
}
</script>
<style scoped>

h1{
    background: lightsalmon;

    /* 谁变给谁配置transition */
    /* 定义变换时间 */
    /* transition: 0.5s; */
}
/* 进入的起点 */
.hello-enter{
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}
/* 离开的起点 */
.hello-leave {
  transform: translateX(0);
}

/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}
/* 进入的过程 */
.hello-enter-active{
	transition: 0.5s;
}
/* 离开的过程 */
.hello-leave-active {
	transition: 0.5s;
}
</style>

多个元素的过渡

两个注意点：

• 如果需要包裹多个元素实现过渡效果，就不能使用transition了，transition只能包裹一个元素，多个元素要使用transition-group
• 每一个过渡元素需要指定key值。

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name="hello">
      <h1 v-show="isShow" key="1">你好呀</h1>
      <h1 v-show="isShow" key="2">yang</h1>
    </transition-group>

  </div>
</template>
<script>
export default {
    name: 'TestVue',
    data() {
        return {
            isShow:true
        }
    }
}
</script>
<style scoped>

h1{
    background: lightsalmon;

    /* 谁变给谁配置transition */
    /* 定义变换时间 */
    /* transition: 0.5s; */
}
/* 进入的起点 */
.hello-enter{
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}
/* 离开的起点 */
.hello-leave {
  transform: translateX(0);
}

/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}
/* 进入的过程 */
.hello-enter-active{
transition: 0.5s;
}
/* 离开的过程 */
.hello-leave-active {
transition: 0.5s;
}

</style>

小结

• 对于进入的动态样式，vue为我们提供了3个类：
  .hello-enter（进入的起点）
  .hello-enter-to（ 进入的终点）
  .hello-enter-active（进入的过程）
  .hello-enter-active一般用于动画效果，.hello-enter和.hello-enter-to一般用于过渡效果。

• 同样对于离开的动态样式，vue为我们提供了3个类：
  .hello-leave（离开的起点）
  .hello-leave-to（ 离开的终点）
  .hello-leave-active（离开的过程）
  .hello-leave-active一般用于动画效果，.hello-leave和.hello-leave-to一般用于过渡效果。

vue集成第三方动画

npm的animate.css动画库：https://animate.style/

• 安装：npm install animate.css --save
• 引入：import "animate.css"
• 配置transition：

<transition-group name="animate__animated animate__bounce"
      enter-active-class="animate__wobble"
      leave-active-class="animate__backOutDown">
      <h1 v-show="isShow" key="1">你好呀</h1>
      <h1 v-show="isShow" key="2">yang</h1>
    </transition-group>

name="animate__animated animate__bounce"表示引入animate.css库
enter-active-class:进入动画
leave-active-class:离开动画
在animate官网中https://animate.style/查看动态样式并引入。

eg：

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name="animate__animated animate__bounce"    enter-active-class="animate__wobble"
      leave-active-class="animate__backOutDown">
      <h1 v-show="isShow" key="1">你好呀</h1>
      <h1 v-show="isShow" key="2">yang</h1>
    </transition-group>
  </div>
</template>
<script>
import "animate.css"
export default {
    name: 'TestVue',
    data() {
        return {
            isShow:true
        }
    }
}
</script>
<style scoped>
h1{
    background: lightsalmon;
}
</style>

效果：

当然还有许多其他的动画库，可自行引入。