初识Animate.css
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。
一、安装使用
安装
使用 npm 安装：
$ npm install animate.css --save
或者使用 Yarn 安装（这只适用于 Webpack、Parcel 等适当的工具。如果您不使用任何工具来打包或捆绑您的代码，您可以简单地使用下面的 CDN 方法）：
$ yarn add animate.css
将其导入您的文件：
import 'animate.css';
或者使用 CDN 将其直接添加到您的网页：
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
二、基本用法
安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记animate__前缀！）：
<h1 class="animate__animated animate__bounce">An animated element</h1>
使用@keyframes
尽管该库为您提供了一些帮助类，例如animated让您快速运行的类，但您可以直接使用提供的动画keyframes。这提供了一种灵活的方式来将 Animate.css 用于您当前的项目，而无需重构您的 HTML 代码。
例子：
.my-element {
display: inline-block;
margin: 0 0.5rem;
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 2s; /* don't forget to set a duration! */
}
CSS 自定义属性（CSS 变量）
从版本 4 开始，Animate.css 使用自定义属性（也称为 CSS 变量）来定义动画的持续时间、延迟和迭代。这使得 Animate.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;
}
自定义属性还可以轻松地动态更改所有动画的时间受限属性。这意味着您可以使用 javascript one-liner 获得慢动作或延时效果：
// 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');
1.使用方式
- 在标签上加上animated 及 动画名称：
代码如下（示例）：
<transition name="fade"
enter-active-class="animated swing "
leave-active-class="animated shake "
>
<div v-if="show">hello world</div>
</transition>
注：animated 类似于全局变量，它定义了动画的持续时间,默认1s；swing是动画具体的动画效果的名称，你可以选择任意的效果。
2.同时使用过渡和动画
代码如下（示例）：
<transition name="fade"
type="transition"
:duration="{enter:5000,leave:10000}"
//enter和leave分别为入场动画和出场动画的时间
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
<!-- type="transition" 设置动画是以transition时间为标准结束还是animate时间为标准结束，animate默认时长是1s-->
<!-- appear-active-class 在页面刷新的时候展示动画效果与appear同时使用-->
<!-- :duration="5000" 自定义动画时长 在此结束后才移除class-->
<div v-if="show">hello world</div>
</transition>
<style scoped>
.fade-enter,.fade-leave-to {
opacity: 0;
}
.fade-enter-active {
transform-origin: left center;
transition: opacity 1s;
}
.fade-leave-active {
transform-origin: left center;
transition: opacity 1s;
}
</style>
三、keyframes关键帧
<template>
<div>
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="change">切换</button>
</div>
</template>
<script>
export default {
name: 'keyframes',
data () {
return {
show: true
}
},
methods: {
change () {
this.show = !this.show
}
}
}
</script>
<style scoped>
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
//会自动在页面中name为fade的标签上插入这个样式，或者直接在标签上写enter-active-class和leave-active-class，将写好的css样式名字赋上即可
.fade-enter-active{
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
四、transition组件
当元素被transition标签包裹之后，vue会自动分析被包裹的元素的css样式，然后构建一个动画的流程。
在动画开始执行的瞬间会往div标签上增加两个样式：fade-enter、fade-enter-active,当动画第一帧结束开始第二帧的时候，会移除fade-enter样式，同时加上fade-enter-to样式。在动画执行的最后会将fade-enter-active和fade-enter-to都移除。
<template>
<div>
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="change">切换</button>
</div>
</template>
<script scoped>
export default {
name: 'BaseAnimate',
data () {
return {
show: true
}
},
methods: {
change () {
this.show = !this.show
}
}
}
</script>
<style scoped>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 1s;
}
</style>