1 Star 1 Fork 0

张非/vue3-text-animations

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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
MIT License Copyright (c) 2024 张非 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

文字动效组件 展开 收起
README
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/zhang_qm/vue3-text-animations.git
git@gitee.com:zhang_qm/vue3-text-animations.git
zhang_qm
vue3-text-animations
vue3-text-animations
master

搜索帮助