在vue2中使用动画库

发布时间：2023-10-02 12:00

一、在`vue2`中使用 `animate.cs`

1.1 安装

详情参考：使用文档
使用npm进行安装

npm install animate.css --save

在vue-cli创建的main.js中导入

import 'animate.css';

1.2 使用

1.2.1 设置`class`类使用动画效果

将 animate__animate 类以及任何动画名添加到元素中，即可使用动画效果

An animated element

1.2.2 配合vue中的封装组件 `tansition` 使用

在过渡类中使用 animation 属性使用,在文档中复制的类名需要使用后半部分作为动画名称

transition name='box>

.box-enter-active{
  animation: backInDown 1s;
}
.box-leave-active{
  animation: backOutDown 1s;
}

也可以配合transition的自定义过渡类名来使用

设置过渡时间

全局设置
使用:root 设置

:root {
  --animate-duration: 800ms;    //动画持续时间
  --animate-delay: 0.9s;  //动画延迟时间
}

给某个动画设置

.animate__backInDown,.animate__backOutRight{
  --animate-duration: 5s;         //动画持续时间
  --animate-delay: 1s !important;              //动画延迟时间
}

二、在`vue2`中使用 `v-animate-css`

详情参考：使用文档

2.1 安装

npm安装

npm install v-animate-css --save

在vue-cli创建的main.js中导入

import Vue from 'vue';
import VAnimateCss from 'v-animate-css';

Vue.use(VAnimateCss);

2.2 使用

使用v-animate-css来使用v-animate-css

.click是修饰符控制动画触发条件
tatd是动画效果

div class="box" v-animate-css.click="'tada'">

v-animate-css的值也可以是一个对象

div class="box" v-animate-css.click="'animationInfinite'">

export default {
  data() {
    return {
      animationInfinite: {
        classes: "fadeIn",    //动画名
        duration: 5000,       //动画时间
        delay: 1000,   // 动画开始前延迟的时长
        iteration: "infinite",      //动画将重复的次数。任何整数或无限迭代
      },
    };
  },
};

修饰符

此指令有 3 个主要修饰符，click hover once

修饰语	描述
click	这将指示指令在单击组件时启动动画。例如按钮。
hover	这将告诉指令在事件发生时启动动画。onmouseover
once	使用修饰符时，该指令将仅执行一次动画。once

在vue2中使用动画库

一、在vue2中使用 animate.cs

1.1 安装

1.2 使用

1.2.1 设置class类使用动画效果

An animated element

1.2.2 配合vue中的封装组件 tansition 使用