Skip to content

Latest commit

 

History

History
158 lines (116 loc) · 4.05 KB

20210915-Animate.css使用.md

File metadata and controls

158 lines (116 loc) · 4.05 KB

Animate.css使用

官网 https://animate.style/

安装

npm install animate.css --save

引入

在入口文件引入：App.vue

//App.vue
@import './common/css/animate.min.css';

或者使用 CDN 将其直接添加到您的网页：

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

使用

在vue中，使用show变量控制是否加载动画

3.x版本 前缀是animated

<view class="item fadeInDown" :class="{animated : show}"></view>

4.x版本

前缀是animate__

<h1 class="animate__animated animate__bounce">An animated element</h1>

自定义动画时长

CSS设置

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

JS设置

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

延时动画时长 Delay classes

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
Class name Default delay time
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s

The provided delays are from 1 to 5 seconds. You can customize them setting the --animate-delay property to a longer or a shorter duration:

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

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

Slow, slower, fast, and Faster classes

You can control the speed of the animation by adding these classes, as below:

<div class="animate__animated animate__bounce animate__faster">Example</div>
Class name Default speed time
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms

The animate__animated class has a default speed of 1s. You can also customize the animations duration through the --animate-duration property, globally or locally. This will affect both the animations and the utility classes. Example:

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

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

Repeating classes

You can control the iteration count of the animation by adding these classes, like below:

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
Class Name Default iteration count
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite

As with the delay and speed classes, the animate__repeat class is based on the --animate-repeat property and has a default iteration count of 1. You can customize them by setting the --animate-repeat property to a longer or a shorter value:

/* 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;
}

Notice that animate__infinite doesn't use any custom property, and changes to --animate-repeat will have no effect. Don't forget to read the best practices section to make the best use of repeating animations.