这篇文章仅做简单介绍animate.css动画库在uniapp中如何使用

animate.css动画库引入

怕有人没看专栏前面的文章,所以这里重新介绍一边animate.css动画库的引入,知道的可以跳过

可以在这里下载

animate.css动画库官网http://www.animate.net.cn/

下载好animate.css后在项目根目录下创建common文件夹,并将animate.css放入这个文件夹

然后在app.vue文件内引入animate.css

animate.css 简单使用

首先,先将uniapp 自带的index.vue页面修改成如下

代码的意思是点击text的时候显示或隐藏image图片

	<template>
		<view class="content">
			<image v-if="logoShow"  class="logo" src="/static/logo.png"></image>
			<view class="text-area" @click="showLogo">
				<text class="title">{{title}}</text>
			</view>
		</view>
	</template>
	
	<script>
		export default {
			data() {
				return {
					title: 'Hello',
					logoShow:false
				}
			},
			onLoad() {
	
			},
			methods: {
				showLogo(){
					this.logoShow=!this.logoShow
				}
			}	
		}
	</script>
	
	<style>
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	
		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}
	
		.text-area {
			display: flex;
			justify-content: center;
		}
	
		.title {
			font-size: 36rpx;
			color: #8f8f94;
		}
	</style>

可以看到这是未使用animate.css动画库的效果

这时候可以去官网的演示页面找到自己想用的动画

就用这第一个吧

然后个要使用这个动画的标签添加上类 animated 类和 这个动画名字的类bounce

<image v-if="logoShow"  class="logo animated bounce" src="/static/logo.png"></image>

就能看到如下效果了

animate.css动画库官网还有很多动画,这里就不一一列举了,想使用的可以去官网查询