uniapp引用animate.css动画库，uniapp是在window cmd指令用脚手架指令创建的。

vue create -p dcloudio/uni-preset-vue my-project

问题：

参考这个up主导入的animate.css放在common目录

4.动画库使用和图标库创建_哔哩哔哩_bilibili

 

在home.vue页面使用：

<template>
	<view>
<!--		<h3>首页</h3>-->
		<button @click="show=!show">前面按钮 </button>
		<image v-show="show" class="animate__animated animate__bounce"
		 src="../../../static/logo.png"></image>
		<br>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>

<style>

</style>

运行之后点击按钮弹出图片并没有动画效果。

 

解决：

参考以下操作方案，更新重新运行才有效果

1.安装animate.css
$ npm install animate.css --save 
2.全局挂载
//app.vue 中引改成：    @import 'animate.css'

<script>
export default {
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
}
</script>

<style>
/*每个页面公共css */

/*官方图标库 */
@import "common/uni.css";
/*阿里小图标*/
@import "common/icon.css";
/*公共样式*/
@import "common/common.css";
/*第三方动态库*/
/*@import "common/animate.css";*/
@import "animate.css";
</style>

3.在页面中使用

home.vue页面中代码不用改。运行动态效果出来了。