bytedo
/
wkit
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

50 Releases 52 Tags

  • 1.8.2 724b3732a0

    v1.8.2 Stable

    yutent released this 2023-04-04 12:04:17 +08:00 | 65 commits to master since this release

    • 优化动画调用(this.$anim.start()修改为this.$animate()), 内置4种简单的动画不变 (fade, scale, bounce, rotate)

    用法

    对组件本身定义动画

    class Foo extends {
  static animation = {
    type: 'fade', // 可以是4种内置之一

    // 如果内置的动画不满足需求, 可以自定义, 语法详见   HTML的`Element.animate`文档
    custom: [
      {opacity: 0, ...}, // 阶段样式定义
      {opacity: 0.5, ...},
      ...
    ]
  }
}

// 声明之后, 便可在适当时机, 手动触发动画
// 出场动画
// this.$animate() 
// 离场动画
// this.$animate(true)

    对组件内的节点配置动画

    class Foo extends {
   
  render() {
    // 配置同上
    let options = {
      type: 'fade'
    }
    return html`<div ref="foo" #animation=${options}>这个是有动画的节点</div>`
  }

}

// 声明之后, 便可在适当时机, 手动触发动画
// 出场动画
// this.$refs.foo.$animate() 
// 离场动画
// this.$refs.foo.$animate(true)
    Downloads