当前位置: 首页 > 工具软件 > 98.css > 使用案例 >

Animate.css动画演示

许展鹏
2023-12-01

官方演示

https://www.dowebok.com/demo/2014/98/

安装依赖

npm install animate.css --save

main.js引入依赖

import 'animate.css';

CDN引入


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

使用方法

<h1 class="animate__animated animate__bounce">An animated element</h1>

动态绑定class

 :class="{'animate__animated':animate, 'animate__bounceInDown':animate}" 

动态调用方法

  addAnimate () {
      if(this.animate == true){
        return
      }
      this.animate = true
      setTimeout(() => {
      this.animate = false
      }, 1000);
    },
 类似资料: