3分钟掌握 omi-transform

通过npm安装

  1. npm install omi-transform

使用

  1. import { render, WeElement, define } from "omi"
  2. import "omi-transform"
  4. define("my-app", class extends WeElement {
  5.   static observe = true
  7.   install() {
  8.     this.data.rotateZ = 30
  9.     this.linkRef = (e) => {
  10.       this.animDiv = e
  11.     }
  12.   }
  14.   installed() {
  15.     setInterval(() => {
  16.       //slow
  17.       //this.data.rotateZ += 2
  19.       //fast
  20.       this.animDiv.rotateZ += 2
  21.       //sync for update call of any scenario
  22.       this.data.rotateZ = this.animDiv.rotateZ
  23.     }, 16)
  24.   }
  26.   render(props, data) {
  27.     return (
  28.       <css3-transform rotateZ={data.rotateZ} translateX={0} perspective={0} >
  29.         <div ref={this.linkRef}>
  30.           omi-transform
  31.         </div>
  32.       </css3-transform>
  33.     )
  34.   }
  35. })
  37. render(<my-app />, "body")
  • 把需要运动的 DOM 使用 <css3-transform></css3-transform> 包裹
  • 在需要使用 css3transform 的 DOM 上标记 ref 用来直接操作 DOM
  • 在组件函数里便可以使用 this.refs.animDiv 来读取或者设置 css transform属性
  • this.refs.xxx 支持 “translateX”, “translateY”, “translateZ”, “scaleX”, “scaleY”, “scaleZ”, “rotateX”, “rotateY”, “rotateZ”, “skewX”, “skewY”, “originX”, “originY”, “originZ”, “perspective” 这些属性设置和读取
  • perspective 表示透视投影的距离

组件里的某个 DOM 在运动过程中，可能会由于其他逻辑，进行 update。有可能是用户交互，有可能是数据返回的回调。所以，update 前后，DOM 的状态的保留显得尤其重要，不然的话就会有闪烁、跳跃的效果或者其他显示逻辑错误。

可以看到上面的代码在 DOM 运动过程中时不进行 Diff ？组件不进行 update ？万一组件 update，所有运动的状态都会丢失？Omi 怎么解决这个问题？上面的代码已经给出了答案：

使用 this.data.rotateZ 来同步运动 DOM 的状态防止意外的刷新(update)

→ 演示