纯css动画库animate.css的用法
背景
手撕css动画是不是很脑壳痛呢，别慌，它来了，在这里推荐一款纯css的动画库，animate.css，只需要引入它，更改一下元素类名，即可快速实现你想要的动画效果
animate.css动画示例展示
animate.css官方github
animate.css的3.x以下老版本的文档（老版本，不再推荐了）
animate.css新版本官方文档
引入
法一
npm
npm install animate.css --save
yarn
yarn add animate.css
main.js中配置
// 引入animate.css
import animated from 'animate.css';
Vue.use(animated);
法二
通过CDN方式引入
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
</head>
使用
组件中使用
<h1 class="animate__animated animate__fadeIn">An animated element</h1>
如何自定义修改如持续时间之类的动画属性
- 法一
/* 只更改一个动画的持续时间 */
.animate__animated.animate__bounce {
--animate-duration: 2s;
}
/* 更改所有动画的持续时间 */
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
- 法二
除了直接修改style,我们还可以给组件添加animate.css提供的一些特殊类名达到实现修改持续时间之类的动画属性
如：
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
animate提供了哪些动画
- fade 淡入淡出
| 属性 | 效果 |
|---|---|
| fadeIn | 淡入 |
| fadeInDown | 向下淡入 |
| fadeInDownBig | 向下快速淡入 |
| fadeInLeft | 向右淡入 |
| fadeInLeftBig | 向右快速淡入 |
| fadeInRight | 向左淡入 |
| fadeInRightBig | 向左快速淡入 |
| fadeInUp | 向上淡入 |
| fadeInUpBig | 向上快速淡入 |
| fadeOut | 淡出 |
| fadeOutDown | 向下淡出 |
| fadeOutDownBig | 向下快速淡出 |
| fadeOutLeft | 向左淡出 |
| fadeOutLeftBig | 向左快速淡出 |
| adeOutRight | 向右淡出 |
| fadeOutRightBig | 向右快速淡出 |
| fadeOutUp | 向上淡出 |
| fadeOutUpBig | 向上快速淡出 |
- bounce 弹跳类
| 属性 | 效果 |
|---|---|
| bounceIn | 弹跳进入 |
| bounceInDown | 向下弹跳进入 |
| bounceInLeft | 向右弹跳进入 |
| bounceInRight | 向左弹跳进入 |
| bounceInUp | 向上弹跳进入 |
| bounceOut | 弹跳退出 |
| bounceOutDown | 向下弹跳退出 |
| bounceOutLeft | 向左弹跳退出 |
| bounceOutRight | 向右弹跳退出 |
| bounceOutUp | 向上弹跳退出 |
- zoom 缩放类
| 属性 | 效果 |
|---|---|
| zoomIn | 放大进入 |
| zoomInDown | 向下放大进入 |
| zoomInLeft | 向右放大进入 |
| zoomInRight | 向左放大进入 |
| zoomInUp | 向上放大进入 |
| zoomOut | 缩小退出 |
| zoomOutDown | 向下缩小退出 |
| zoomOutLeft | 向左缩小退出 |
| zoomOutRight | 向右缩小退出 |
| zoomOutUp | 向上缩小退出 |
- rotate 旋转类
| 属性 | 效果 |
|---|---|
| rotateIn | 顺时针旋转进入 |
| rotateInDownLeft | 从左往下旋入 |
| rotateInDownRight | 从右往下旋入 |
| rotateInUpLeft | 从左往上旋入 |
| rotateInUpRight | 从右往上旋入 |
| rotateOut | 顺时针旋转退出 |
| rotateOutDownLeft | 向左下旋出 |
| rotateOutDownRight | 向右下旋出 |
| rotateOutUpLeft | 向左上旋出 |
| rotateOutUpRight | 向右上旋出 |
- flip 翻转类
| 属性 | 效果 |
|---|---|
| flipInX | 水平翻转进入 |
| flipInY | 垂直翻转进入 |
| flipOutX | 水平翻转退出 |
| flipOutY | 垂直翻转退出 |
- strong 强调类
| 属性 | 效果 |
|---|---|
| bounce | 弹跳 |
| flash | 闪烁 |
| pulse | 脉冲 |
| rubberBand | 橡皮筋 |
| shake | 左右弱晃动 |
| swing | 上下摆动 |
| tada | 缩放摆动 |
| wobble | 左右强晃动 |
| jello | 拉伸抖动 |
完整的使用示例
<template>
<div class="hello">
<div class="box" ref="box">盒子</div>
<div @click="handleFadeIn">淡入</div>
<div @click="handleFadeOut">淡出</div>
</div>
</template>
<script>
export default {
name: 'Fade',
data() {
return {};
},
created() {},
methods: {
handleFadeIn() {
// this.$refs.box.className = 'box animated fadeIn'; // 这是3.x以下版本的使用方式
this.$refs.box.className = 'box animate__animated animate__fadeIn'; // 这是4.0以上版本的使用方式
},
handleFadeOut() {
// this.$refs.box.className = 'box animated fadeOut'; // 这是3.x以下版本的使用方式
this.$refs.box.className = 'box animate__animated animate__fadeOut'; // 这是4.0以上版本的使用方式
},
},
};
</script>
<style lang="less" scoped>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
文章参考https://www.cnblogs.com/apolloren/p/10828166.html
