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、使用動畫

4.0以上版本需要加上字首，

animate__

。例如：

animate__fadeInUp

。此處下載下傳為3.7.2，是以示例未加字首。

4、延遲類

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、速度類

您可以通過添加以下類來控制動畫的速度，如下所示：

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__animated

css有一個預設的速度

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、重複類

您可以通過添加以下類來控制動畫的重複次數，如下所示：

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 
}