tm-translate 动画组件
🎉目录导航
👉基本示例
默认自动播放
<tm-translate animation-name="fadeIn">
<tm-button theme="blue">渐隐进</tm-button>
</tm-translate>
1
2
3
4
5
2
3
4
5
👉禁止自动播放
<tm-translate :auto="false" animation-name="fadeIn">
<tm-button theme="blue">渐隐进</tm-button>
</tm-translate>
1
2
3
4
5
2
3
4
5
👉手动播放
通过$refs可以使用play() stop()两个函数。
<tm-translate ref="a_1" :auto="false" animation-name="fadeIn">
<tm-button @click="$refs.a_1.play()" theme="blue">渐隐进</tm-button>
</tm-translate>
1
2
3
4
5
2
3
4
5
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| duration | Number | 任意整数 | 500 | 动画时长 |
| wait | Number | 任意整数 | 0 | 延时多少毫秒开始播放 |
| auto | String|Boolean | true|false | true | 是否自动播放动画 |
| animation-name | String | fadeUp|fadeDown|fadeLeft fadeRight|zoomIn|zoomOut fadeIn|fadeOut | fadeUp | 动画效果名称 |
animation-name可选值说明
| fadeUp | fadeDown | fadeLeft | fadeRight | zoomIn | zoomOut | fadeIn | fadeOut |
|---|---|---|---|---|---|---|---|
| 下至上 | 上至下 | 右至左 | 左至右 | 大至小 | 正常至无 | 渐显 | 渐隐 |
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @start | 无 | 无 | 动画开始执行触发 |
| @end | 无 | 无 | 动画结束执行触发 |
👉 ref组件可用函数
<tm-translate ref="a_1" :auto="false" animation-name="fadeIn">
</tm-translate>
1
2
2
//需要通过$refs.具名来执行
//播放，
this.$refs.a_1.play()
//停止
this.$refs.a_1.stop()停止
1
2
3
4
5
2
3
4
5
| 函数名 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| play | 无 | 无 | 播放 |
| stop | 无 | 无 | 停止 |
👉更新日志
2021年8月20日14:8:5 初始版本。