animation-directive

动画指令

演示网址: https://animationdirective.free.idcfengye.com

> Sorry for using such a long name that the author never remembers the name and forgets to update it, but the name is very clear about what the plugin does > > 很抱歉使用了这么长的名字,导致作者总是也记不住名字而忘了更新,但是这个名字非常明确的表达了插件的作用 > > Features: Easy to learn, easy to use, excellent performance, applicable to a variety of animation plug-in, plug-in is applicable to vue3.0, the use of app.use method, this plug-in requires the animation support of the Animate. You only need to introduce the style of Animate > > 特点:易学易用，性能出色，适用场景丰富的动画插件, 插件适用于 vue3.0 ,使用时需要使用 app.use 方法, 此插件需要用到 Animate.css 的动画支持,只需要在引入插件的同时引入 Animate.css 的样式即可

EasyStart

快速上手

install

安装

$ npm install animation-directive animate.css --save
$ 或者
$ yarn add animation-directive animate.css

use

使用

• In main.js or main.ts

• 在main.js或者main.ts中

 import { createApp } from 'vue'
 import App from './App.vue'
 import animationDirective from 'animation-directive'
 import 'animate.css'
 const app = createApp(App)
 app.use(animationDirective)
 app.mount('#app')

• In the vue component
• 在vue组件中

<div>Hello,world!!</div>

Easy to use

简单使用

directive

指令

• Simply animate the animation you want after v-Animate: (see https://animate.style/ for details)

• 只需要在v-Animate:后写出你想实现的动画效果即可,详情见https://animate.style/

<div>Hello,world!!</div>

user-defined

自定义

duration

持续时间

• It is only necessary to Animate: animation name = "{duration: Duration}" for a time of up to one decimal place, with the default being 1

• 只需要在v-Animate:动画名 = "{duration: 持续的时间}" 持续的时间为至多一位小数的数字,默认值为1

<div>Hello,world!!</div>

delay

延迟时间

• You only need to Animate: animation name = "{duration: Time of delay}" to animate for a time of up to one decimal place. The default is 0

• 只需要在v-Animate:动画名 = "{duration: 延迟的时间}" 延迟的时间为至多一位小数的数字,默认值为0

<div>Hello,world!!</div>

repeat

重复次数

• It is only necessary to Animate: animation name = "{duration: number of repetitions}". The number of repetitions is an integer and the default value is 1
• 只需要在v-Animate:动画名 = "{duration: 重复的次数}" 重复的次数为整数,默认值为1

<div>Hello,world!!</div>

more

定义多个

• Multiple attributes can be juxtaposed, no order

• 多个属性并列即可,无顺序

<div>Hello,world!!</div>

配合响应式ref使用

<template>
  <span>
    {{ aniName}}
  </span>
  <button>bounce</button>
  <button>flash</button>
  <button>shakeX</button>
</template>