-
v1.8.0 Stable
released this
2023-03-29 12:08:37 +08:00 | 68 commits to master since this release- 增加动画的支持, 并内置4种简单的动画 (
fade, scale, bounce, rotate)
用法
对组件本身定义动画
class Foo extends { static animation = { type: 'fade', // 可以是4种内置之一 // 如果内置的动画不满足需求, 可以自定义, 语法详见 HTML的`Element.animate`文档 custom: [ {opacity: 0, ...}, // 阶段样式定义 {opacity: 0.5, ...}, ... ] } } // 声明之后, 便可在适当时机, 手动触发动画 // 出场动画 // this.$anim.start() // 离场动画 // this.$anim.start(true)对组件内的节点配置动画
class Foo extends { render() { // 配置同上 let options = { type: 'fade' } return html`<div ref="foo" #animation=${options}>这个是有动画的节点</div>` } } // 声明之后, 便可在适当时机, 手动触发动画 // 出场动画 // this.$refs.foo.$anim.start() // 离场动画 // this.$refs.foo.$anim.start(true)Downloads
- 增加动画的支持, 并内置4种简单的动画 (