animate.css 动画库的使用

i小杨

已于 2022-05-07 23:17:18 修改

阅读量1.9k

点赞数

分类专栏： npm常用js库文章标签： css 动画 vue.js

于 2022-05-07 21:25:27 首次发布

本文链接：https://blog.csdn.net/i_Satan/article/details/124639402

版权

npm常用js库专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中安装和使用animate.css库，包括全局引入、点击事件触发动画以及结合Vue的transition组件实现动画效果。通过示例代码展示了如何在元素上添加和切换动画类名，以实现不同动画效果。同时，提供了大佬的代码示例，演示了动态切换动画类名的方法。

摘要由CSDN通过智能技术生成

安装

npm install animate.css --save

在线文档

animate.css官方在线文档

参考文章

文章1@农药啊
 文章2@zxy_aabbcc
文章3@Suwanbin

vue项目中引入

// 全局引入 animate.css 插件
import animate from "animate.css"
Vue.use(animate)

使用注意事项

需要添加动画的元素需要两个类名,

class=" animate__animated animate__‘自己想要的动画名’ "

基本使用方式

html部分代码:
    <button @click="registerAnimateHandle()">激活动画</button>
    <transition
      enter-active-class="animate__animated animate__flash"
      leave-active-class="animate__animated animate__shakeX"
    >
      <div class="animate_content" v-if="animate">动画组件</div>
    </transition>
js部分代码:
 data() {
    return {
      animate: true,
    };
  },
  methods: {
    registerAnimateHandle() {
      this.animate = !this.animate;
    },
  },

点击元素产生动画效果

在这里插入图片描述

大概思路:
	1.让添加动画的元素,点击的时候更换类名;
	2.类名必须发生变化的时候才可以产生动画的效果.
	3.异步任务可以 让一个元素在不同的类名中 进行改变.
	4.将需要添加的动画效果的类名在异步任务中进行添加.
	5.参考上面的 文章3

html部分代码:
      <div
        class="animate_content"
        ref="animateDiv"
        @click="setAnimateHandle()"
      >
        动画组件
      </div>
js部分代码:
 setAnimateHandle() {
 	//每次点击元素的时候,都将该元素的 class名改为 一个基础的类名
      this.$refs.animateDiv.className = "animate_content 
      animate__animated ";
//需要添加的动画名 必须要异步添加,如果同步添加 class名可能只会发生一次变化,所以只有第一次点击会有动画效果.
      setTimeout(() => {
        this.$refs.animateDiv.className =
          "animate_content animate__animated animate__shakeX";
      }, 0);
    },

大佬的代码:

<div id="app">
			<div :class="['animateDiv', 'animate__animated', animate]" @click="sharkAnimate"></div>
			<button type="button" @click="animate = animate === 'animate__fadeInDown' ? 'animate__fadeOutRightBig' : 'animate__fadeInDown'">切换显示</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					// message: 'Hello Vue!',
					needShow: true,
					shark: true,
					animate: 'animate__fadeInDown'
				},
				methods: {
					sharkAnimate() {
						// this.animate = 'animate__jello'
						document.querySelector(".animateDiv").className = "animateDiv animate__animated";
						setTimeout(() => {
							document.querySelector(".animateDiv").className = "animateDiv animate__animated animate__jello";
						}, 0);
					}
				}
			})
		</script>