animation-directive v1.1.1

animation-directive

动画指令

演示网址: http://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 v-Animate:bounce>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 v-Animate:bounce>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 v-Animate:bounce="{duration:2.1}">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 v-Animate:bounce="{delay:2}">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 v-Animate:bounce="{repeat:2}">Hello,world!!</div>

more

定义多个

• Multiple attributes can be juxtaposed, no order

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

<div v-Animate:bounce="{repeat:2,duration:2.1,delay:2}">Hello,world!!</div>

配合响应式ref使用

<template>
  <span v-Animate:[aniName]="{ duration: durationTime, delay: delayTime, repeat: repeatTimes }">
    {{ aniName}}
  </span>
  <button @click="aniName = 'bounce'">bounce</button>
  <button @click="aniName = 'flash'">flash</button>
  <button @click="aniName = 'shakeX'">shakeX</button>
</template>
<script setup lang="ts">
import { ref, Ref } from 'vue'
const aniName:Ref<String> = ref('bounce')
const durationTime:Ref<number> = ref(1)
const delayTime:Ref<number> = ref(0)
const repeatTimes:Ref<number> = ref(1)
</script>