纯css动画库animate.css的用法

最新推荐文章于 2024-05-06 19:28:55 发布

Boale_H

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量1.1k

点赞数 1

Edited by Boale_H （博哥的二进制世界）

本文链接：https://blog.csdn.net/Boale_H/article/details/106712127

版权

纯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

Boale_H

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
纯css动画库animate.css的用法

纯css动画库animate.css的用法背景引入法一法二使用组件中使用如何自定义修改如持续时间之类的动画属性animate提供了哪些动画完整的使用示例背景手撕css动画是不是很脑壳痛呢，别慌，它来了，在这里推荐一款纯css的动画库，animate.css，只需要引入它，更改一下元素类名，即可快速实现你想要的动画效果animate.css动画示例展示animate.css官方githubanimate.css的3.x以下老版本的文档（老版本，不再推荐了）animate.css新版本官方文档引入
复制链接

扫一扫