Animate.css的使用

一、安装

bash 复制代码
npm install animate.css --save

二、引入

bash 复制代码
import 'animate.css';

三、使用

bash 复制代码
     <h1
      class="animate__animated animate__bounce"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      An animated element
    </h1>



//在js中的方法
function mouseenter(e) {
  e.target.className = "animate__animated animate__bounce";
}
function mouseleave(e) {
  e.target.className = "";
}



//可以自行调节动画速度
/* 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;
}

四、效果展示

相关推荐
摸鱼的春哥25 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel9 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip9 小时前
JavaScript事件流
前端·javascript
赵得C9 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG9 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js