【uni-app】uni-app关于使用animate.css的演示和使用（六）

已于 2024-04-15 10:29:35 修改
阅读量786 收藏
点赞数
分类专栏： uni-app 文章标签： javascript html
于 2021-05-24 16:43:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43576866/article/details/117226539
版权

❤ 写在前面

如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~
欢迎关注我的公众号【有更多的前端教程】 或者来看 我的个人网站
二维码

下面是关于使用animate.css的演示和使用

/* hover-class就是动画的类，class是固定使用animated */
<view class="animated" hover-class="bounce">
	<view>内容</view>
</view>

演示的Demo在下面gitee里
gitee地址：https://gitee.com/gongjs/animate.git
附上截图一张，自己写的一个demo，喜欢的点个收藏，谢谢谢谢~~~~
在这里插入图片描述

JS Lover
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uni-app如何使用动画
09-20
uni-app如何使用动画
animate.css-uni-app动画样式文件
11-04
animate.css------uni-app动画样式文件
animate.css在uni-app中使用
weixin_43591127的博客
07-02 1047
昨天在联系uni-app整合animate.css遇到问题就是游览器爆黄而且单点击view时没有所谓的“动态”反应，网上有很多关于animate.css但大部分过期了，官网都改了。 新写法就是 class="animate__animated animate__bounce" 一定要加上animate__animated，注意下面是两个下划线 它在uni-app里面使用很简单下载其animate.css，放到uni-app里面的文件里面，通常性是整体页面使用这时就放到App.vue里面的style里，如下
uniapp中使用animate.css
farise的博客
02-17 1554
uniapp中使用animate.css
uniapp引用animate.css动画库
weixin_45915243的博客
03-17 3383
1.安装animate.css $ npm install animate.css --save 2.全局挂载 //app.vue @import 'animate.css' 3.在页面中使用 在view中的class添加animate__animated 以及动画名 需要加上animate_ 的前缀 <view class="animate__animated animate__bounceIn" ></view> 4.tips：我在使用时发现这样写并没
uniapp使用动画 css 库( Animate.css )
qq_43609453的博客
03-25 2094
@[TOC](uniapp使用动画 css 库( Animate.css )) https://animate.style/ https://daneden.github.io/animate.css/ 1、下载Animate.css 文件 https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css （3.7.2） https://cdnjs.cloudflare.com/ajax/libs/animate.c
uni-app 使用动画 css 库(Animate) Animate.css
热门推荐
以后永远的博客
01-18 1万+
新手uni-app引入css3动画Animate.css库，animate.css是一堆很酷，有趣且跨浏览器的动画，供您在项目中使用。非常适合强调，主页，滑块和一般的加水效果，官方没有对它进行太多的说明，目前版本为3.7.2 ，动画库的使用方式很简单。详细说明使用教程以及如何设置动画快慢以及延迟 新手uni-app引入css3动画Animate.css库 新地址 在这里下载 https://cdn...
vue过渡和animate.css结合使用详解
08-30
本篇文章主要介绍了vue过渡和animate.css结合使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
animate.css-4.1.1.zip
02-03
最新animate.css文件，解压后将里面的animate.css放入vscode即可
vue2.0 和 animate.css的结合使用
11-29
这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候，难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。  首先是transition组件，在2.0中由transition...
uni-app引入Animate.css动画库
qq_43628847的博客
09-18 872
1.下载css文件 下载地址. http://www.haorooms.com/uploads/example/Animatecss/ 我尝试用 npm install animate.css --save 尝试了之后，发现好像没用，后面直接下载Animate.css文件，放在项目中，可以正常使用 2.在app.vue中引入 @import url("./common/animate.css’"); 3.使用 An animated element An animated element 我发现用hov
ajax 导致 css 延迟_在H5，小程序，uni-app中使用animate.css
weixin_39849287的博客
11-25 206
动画过渡效果对于程序的重要性是毋容置疑的，过渡动画的流畅真的能给人一种程序很顺畅的感觉。ios系统基本上不管是什么操作都喜欢运用动画过渡，所以给人一种超流畅的感觉！在项目中我们也会经常被要求在元素切换，界面过渡中添加动画过渡效果。可是自己写的话真的超级麻烦，如果有一款强大的动画库岂不是很爽。什么是animate.cssanimate.css 是一个css3动画库,包含76种动画，并且完全免费开源，...
uni-app怎么引入animate.css
weixin_45890764的博客
01-17 1372
第一步 下载animate.css，网站：http://www.animate.net.cn/ 第二步 建立文件夹common，把下载好的animate.css放进来，在App.vue中引入animate：@import "./common/animate.css" 第三步 在需要的界面当中，创建 view标签这个 view标签相当于一个div标签> <view class="animated" hover-class="bounce" style="border: 1px solid red;
uni-app 使用动画库animate
qq_41578884的博客
08-26 2684
1.创建animate.css并将下列动画库css复制：演示下载地址 @charset "UTF-8";/*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software an
uniapp 引入 Animate.css动画库
Bi-Hu的博客
09-27 300
其实很简单 下载 引入 使用即可。 下载： https://animate.style/ 引入： 使用： 非常简单！
uniapp 微信小程序配置 animate.css
qq_44277696的博客
04-19 654
1.先下载animate.css npm install animate.css --save 2.然后再node_modules中找到animate.css/animate.css，复制到static目录下 3.在App.vue中引入 <style> /* 引入动画 */ @import "./static/animate/animate.css"; </style> 注意：微信小程序中要把animate.css文件中的 :root 替换成 page ...
uniapp css
qq_38188762的博客
10-15 441
/* #ifdef APP-PLUS */ height: calc(var(--status-bar-height) + 80upx); /* #endif */ //计算 状态栏 + 其他高度
uniapp中使用animate.css 版本4.1.1在微信小程序中不生效解决办法
yao_1063066968的博客
02-20 1325
:root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; } 修改为: page { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; }
vue2使用animate.css
最新发布
10-02
在Vue2中使用animate.css，你可以按照以下步骤进行操作: 1. 在终端中使用npm命令安装animate.css库: ``` npm install animate.css --save ``` 2. 在你的main.js文件中引入animate.css: ```javascript import 'animate.css'; ``` 3. 在组件中使用animate.css的类来实现动画效果。例如，在一个按钮上添加bounce动画效果: ```html <template> <button class="animate__animated animate__bounce">Click me</button> </template> ``` 4. 如果你想在过渡效果中使用animate.css来实现动画，你可以使用Vue的过渡组件和animate.css的类。例如，在一个切换动画中使用zoomIn和zoomOut效果: ```html <template> <transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut"> <div v-if="isShow" class="box"></div> </transition> </template> ``` 以上是在Vue2中使用animate.css的基本步骤。你可以根据你的具体需求来选择并应用animate.css中提供的各种类和动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JS Lover

我会尽最大努力分享更多开发经验

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值