当前位置：首页 > article >正文

Vue前端开发：animate.css第三方动画库

article 2024/11/15 23:54:24

在实际的项目开发中，如果自定义元素的动画，不仅效率低下，代码量大，而且还存在浏览器的兼容性问题，因此，可以借助一些优秀的第三动画库来协助完成动画的效果，如animate.css和gsap动画库，前者使用样式，后者通过JavaScript来实现动画效果。今天先给大家分享animate.css知识，如果有所帮助，大家点点关注支持一下，也可以联系上我一起学习。
animate.css是一个使用CSS样式实现动画效果的第三方库文件，它包含各类动画效果，如强调、切换和引导等，同时，它能很好地兼容各大浏览器，可以很方便地快速运用到各个Web项目中，在使用animate.css动画库之前，需要先在在项目文件夹下，输入如下指令。

npm install animate

安装成功后，在需要使用该动画效果的组件中导入该库文件，代码如下。

import "animate.css";

导入成功后，就可以在组件的模板元素中，使用动画库的类别样式了，接下来通过一个示例来演示animate.css 库在组件中的使用过程。
实例5-4 应用动画库中样式

1. 功能描述

在上述示例5-1的基础上，当单击按钮时，通过应用第三方动画的样式，实现元素以反弹跳跃的方式隐藏，以上下摇摆的方式显示。

2. 实现代码

在项目components 文件夹的ch5子文件夹中，添加一个名为“PlugAnimate”的.vue文件，在文件中加入如清单5-4所示代码。

代码清单5-4 PlugAnimate.vue代码

<template>
  <div class="action">
    <div class="act">
      <input type="button" @click="startTrans()" 
		:value="blnShow ? '隐藏动画' : '显示动画'">
    </div>
    <transition name="animate__animated animate__bounce"
	 enter-active-class="animate__swing"
      leave-active-class="animate__backOutUp">
      <div class="mytrans" v-if="blnShow"></div>
    </transition>
  </div>
</template>
 
<script>
import "animate.css";
export default {
  name: "PlugAnimate",
  data() {
    return {
      blnShow: true
    };
  },
  methods: {
    startTrans() {
      this.blnShow = !this.blnShow;
    }
  },
};
</script>
<style>
.action .act {
  margin: 10px 0;
}

.action .act input {
  width: 80px;
  height: 32px;
}

.mytrans {
  width: 200px;
  height: 30px;
  background-color: #ccc;
}
</style>