Vue基础知识-（十九）Vue实现动画效果

本文最后更新于：April 11, 2022 am

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

默认效果

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
<template>
  <div>
    <button @click="isShow= !isShow">显示/隐藏</button>
    <h1 v-show="isShow">动画效果展示</h1>
  </div>
</template>

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

<style scoped>
h1{
  background-color: orange;
}

</style>

添加动画

这里只是显示和隐藏。一般来说需要写两个动画效果，即：显示和隐藏时的效果。但这里不需要，只需要将显示的效果反转，或将隐藏的效果反转即可。这里以显示的效果反转为例。

动画设置

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style scoped>
h1{
  background-color: orange;
}

.come{  /*显示时的动画效果设置*/
  animation: tothefor 1s;
}
.go{ /*隐藏时的动画效果设置*/
  animation: tothefor 1s reverse;
}

@keyframes tothefor { /*显示时的动画效果*/
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0px);
  }
}

</style>

然后绑定元素：这里只是先暂时绑定了显示时的效果的class名，也可以改成隐藏时的效果的class名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
    <button @click="isShow= !isShow">显示/隐藏</button>
    <h1 v-show="isShow" class="come">动画效果展示</h1> 
  </div>
</template>

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

动态绑定

不用我们去管class，而是由vue自动帮我们设置。这里需要使用 transition ，让它来帮我们动态设置class。

1
2
3
4
5
6
7
8
<template>
  <div>
    <button @click="isShow= !isShow">显示/隐藏</button>
    <transition>
      <h1 v-show="isShow">动画效果展示</h1>
    </transition>
  </div>
</template>

但是，这样写了之后，vue是不知道绑定哪个class的。所以需要使用vue知道的class名。而且必须这样使用，不然没有效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style scoped>
h1{
  background-color: orange;
}

.v-enter-active{ /*等同于come，显示的效果*/
  animation: tothefor 1s;
}
.v-leave-active{ /*等同于go，隐藏的效果*/
  animation: tothefor 1s reverse;
}

@keyframes tothefor {
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0px);
  }
}

</style>
自定义

可以给过渡取自定义的名称。如：

1
2
3
4
5
6
7
8
<template>
  <div>
    <button @click="isShow= !isShow">显示/隐藏</button>
    <transition name="ttf"> <!--自定义取名称为 ttf -->
      <h1 v-show="isShow">动画效果展示</h1>
    </transition>
  </div>
</template>

在自定义取名过渡之后还必须要改的地方是class名称。默认是以 v 开头的，现在需要改成自定义名称为开头。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style scoped>
h1{
  background-color: orange;
}

.ttf-enter-active{ /*修改 v -> ttf */
  animation: tothefor 1s;
}
.ttf-leave-active{ /*修改 v -> ttf */
  animation: tothefor 1s reverse;
}

@keyframes tothefor {
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0px);
  }
}

</style>

首次显示效果

实现第一次进入页面时，就有显示的动画效果。只需要给过渡transition添加一个属性appear 并将其设置为 true即可。

1
2
3
4
5
6
7
8
<template>
  <div>
    <button @click="isShow= !isShow">显示/隐藏</button>
    <transition name="ttf" :appear="true">
      <h1 v-show="isShow">动画效果展示</h1>
    </transition>
  </div>
</template>

也可以简写：

1
2
3
4
5
6
7
8
<template>
  <div>
    <button @click="isShow= !isShow">显示/隐藏</button>
    <transition name="ttf" appear>
      <h1 v-show="isShow">动画效果展示</h1>
    </transition>
  </div>
</template>

注意：在经过vue的渲染后，是没有transition标签的！

第三方动画库

npm官方

动画库官方文档

安装

1
npm install animate.css --save

引入

1
2
3
<script>
import 'animate.css'
</script>

再配置：name名称必须一样！！

1
2
3
4
5
6
7
8
<template>
  <div>
    <button @click="isShow= !isShow">显示/隐藏</button>
    <transition name="animate__animated animate__bounce" appear>
      <h1 v-show="isShow">动画效果展示</h1>
    </transition>
  </div>
</template>

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <button @click="isShow= !isShow">显示/隐藏</button>
    <transition
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__bounce"
        leave-active-class="animate__backOutUp"
    >
      <h1 v-show="isShow">动画效果展示</h1>
    </transition>
  </div>
</template>

其中：

  • enter-active-class：表示进入（显示）效果。
  • leave-active-class：表示离开（隐藏）效果。