vue.js中使用animate.css

最新推荐文章于 2024-08-24 10:18:14 发布

走_开

最新推荐文章于 2024-08-24 10:18:14 发布

阅读量567

点赞数

分类专栏： web前端 css 文章标签： css3 css

本文链接：https://blog.csdn.net/believet93/article/details/107709830

版权

web前端同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

1、安装

npm install animate.css --save

2、在main.js文件中引入

import animated from 'animate.css'

Vue.use(animated)

3、使用实例

（1）基础用法

    <h1 class="animate__animated animate__rotateOutDownRight animate__infinite animate__delay-2s">An animated element</h1>

（2）@keyframes用法

.my-element {
  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

（3）js用法

const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

// 监听动画结束
element.addEventListener('animationend', () => {
  // do something
});