uniapp引用animate.css动画不起作用

最新推荐文章于 2024-08-17 16:13:16 发布

Lan.W

最新推荐文章于 2024-08-17 16:13:16 发布

阅读量1.1k

点赞数 1

分类专栏： vue2 JS 文章标签： uni-app 前端 javascript vue2 animate

本文链接：https://blog.youkuaiyun.com/LlanyW/article/details/129026741

版权

vue2 同时被 2 个专栏收录

21 篇文章

订阅专栏

18 篇文章

订阅专栏

文章讲述了在uniapp项目中引用animate.css动画库遇到的问题及解决方法。通过在app.vue全局引入animate.css，并在home.vue页面中使用按钮触发图片显示动画，最终实现了预期的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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页面中代码不用改。运行动态效果出来了。