当前位置:首页 > 播放器资讯 热门

animate手机版下载安卓版(animate手机版下载免费)

作者:播放器家园 来源:www.bofangqi.org 时间:2022-11-25 点击:0

本文播放器家园分享“animate手机版下载安卓版(animate手机版下载免费)”!

动画过渡效果对于程序的重要性是毋容置疑的,过渡动画的流畅真的能给人一种程序很顺畅的感觉。ios系统基本上不管是什么操作都喜欢运用动画过渡,所以给人一种超流畅的感觉!在项目中我们也会经常被要求在元素切换,界面过渡中添加动画过渡效果。可是自己写的话真的超级麻烦,如果有一款强大的动画库岂不是很爽。

什么是animate.css

animate.css 是一个css3动画库,包含76种动画,并且完全免费开源,可以到github上去下载,使用方法也非常简单,并且因为是css库的原因,完全兼容 H5,小程序以及uni-app。

官网:

gitHnb:

安装方法

npm安装:

npm install animate.css --save

yarn安装:

yarn add animate.css

CDN引入

引入方法

在各个不同的环境中,引入方法有细微的区别,但是基本上大同小异。

在使用webpack的h5中引入上是把它引入到 main.js 中。小程序的开发环境中,将下载好的 animate.css 引入到 app.wxss中即可,引入之前别忘了将后缀改为.wxss eg: @import ‘./animate.wxss’; 。在uni-app中引入也非常简单,将下载好的 animate.css 引入到 App.vue中即可。

使用方法

animate.css 的使用非常简单,因为它是把不同的动画绑定到了不同的类里,所以想要使用哪种动画,只需要把通用类 animated 和相应的类添加到元素上就行了。

所以说,我们想切换操作不同的动画,只需要用 css 来给需要动画的那个元素来添加,删除不同的类即可。

以下是 animate.css 提供的动画类列表:

当然,除了动画之外,我们还可以给动画元素添加其它的类来控制动画执行时间,是否无限循环,延迟时间等。

至于具体的功能,还是推荐大家去看官方文档,同时它的官网可以预览到各个动画类的具体效果;。