背景
手撕css动画是不是很脑壳痛呢，别慌，它来了，在这里推荐一款纯css的动画库，animate.css，只需要引入它，更改一下元素类名，即可快速实现你想要的动画效果
animate.css的3.x以下老版本的文档（老版本，不再推荐了）
引入
法一
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>
