vue3-text-animations

vue3-text-animations（持续更新中）

下载

npm i vue3-text-animations -s 

App.vue 全部组件导入并挂载全局

import Vue3TextAnimations from 'vue3-text-animations'

app.use(Vue3TextAnimations)

App.vue 部分组件导入并挂载全局

import {Binds} from 'vue3-text-animations'

app.use(Binds)

文字动效组件导入当前组件

import {Binds} from 'vue3-text-animitions'

具体的文字动画组件（持续更新中）

公共-说明参数说明：
duration 动画持续时间 默认0.5s
immediately 是否立即执行动画 默认true
onStart 动画开始回调
onEnd 动画结束回调

公共-组件实例化方法：
start()   开始动画
paused()  暂停动画
rest(number) 默认200ms后执行 重置动画
-------------------------------------------

百叶窗效果组件
<Binds :duration="0.8" :immediately="true" ref="bds" text="测试百叶窗Binds" @onStart="console.log('start')"></Binds>
参数说明：
text 执行动画的文字内容

-------------------------------------------
斜拉出现效果组件
  <Inclined ref="inclinedEl" @onStart="start"
    @onEnd="end">
      <div>
        测试整体斜对角出现
      </div>
    </Inclined>
参数说明：
direction 动画开始方向（默认：left_top） right_top | right_bottom | left_top | left_bottom
delay 延迟时间 默认0
--------------------------------------------------
棋盘效果组件
<Board text="测试棋盘效果" textColor="#333"></Board>
参数说明：
text 执行动画的文字内容
textColor 文字颜色
-----------------------------------------
<Fall ref="FallEl"  text="测试掉落效果测试掉落效果"></Fall>
参数说明：
text 执行动画的文字内容
top  掉落高度Number类型默认100px
model 掉落模式 random|top|bottom 三种
intervalTime 间隔时间 number类型 默认0.5s