uniapp使用动画 css 库( Animate.css )

@[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.css/4.1.1/animate.min.css （4.1.1）

将下载的文件放在components目录下

2、在App.vue中全局引入

//App.vue
<style>
	@import url("/components/animate.min.css");
</style>

3、使用动画

<view class="animated 动画样式名" hover-class="点击后的需要的动画样式名">

4.0以上版本需要加上前缀，animate__。例如：animate__fadeInUp。此处下载为3.7.2，所以示例未加前缀。

4、延迟类

<div class="animated bounce delay-2s">Example</div>

Animate.css提供以下延迟：

className	默认延迟时间
animate__delay-2s(4.0以上版本) / delay-2s	2s
animate__delay-3s(4.0以上版本) / delay-3s	3s
animate__delay-4s(4.0以上版本) / delay-4s	4s
animate__delay-5s(4.0以上版本) / delay-5s	5s

提供的延迟为1到5秒。您可以自定义它们，将--animate-delay属性设置为更长或更短的持续时间：

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;     //这是v4.0以上用法
  animation-delay：2s;      //这是3.0
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
  animation-delay：0.5s;
}

5、速度类

<div class="animated bounce faster">Example</div>

您可以通过添加以下类来控制动画的速度，如下所示：

className	默认速度时间
animate__slow (4.0以上版本) / slow	2s
animate__slower (4.0以上版本) / slower	3s
animate__fast (4.0以上版本) / fast	800ms
animate__faster (4.0以上版本) / faster	500ms

该animate__animatedcss有一个默认的速度1s。您还可以通过--animate-duration属性在全局或本地自定义动画的持续时间。这将同时影响动画和公共css。例子：

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;      //这是v4.0以上用法
  animation-duration：2s;      //这是3.0  
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;      
  animation-duration：0.5s;   	
}

6、重复类

您可以通过添加以下类来控制动画的重复次数，如下所示：

<div class="animated bounce repeat-2">Example</div>

className	默认重复次数
animate__repeat-1(4.0以上版本) / repeat-1	1
animate__repeat-2(4.0以上版本) / repeat-2	2
animate__repeat-3(4.0以上版本) / repeat-3	3
animate__infinite(4.0以上版本) / infinite	无限次重复

默认重复次数为1。您可以通过将--animate-repeat属性设置为更长或更短的值来自定义它们：

/* The element will repeat the animation 2x
   It's better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animate-repeat: 2;  //这是v4.0以上用法
  animation-repeat: 2;	//这是3.0 
}