omi-transform

如果你使用过 css3transform, 就知道制作页面动效是多么地惬意。现在，你再 Omi 项目里也可以使用上 css3transform 的优秀的特性并且拥有同样高效的性能:

  1. import { render, WeElement, tag, observe } from "omi";
  2. import "omi-transform";
  4. @observe
  5. @tag("my-app")
  6. class MyApp extends WeElement {
  7.   install() {
  8.     this.data.rotateZ = 30
  9.     this.linkRef = (e) => {
  10.       this.animDiv = e
  11.     }
  12.   }
  15.   installed() {
  16.     setInterval(() => {
  17.       // 慢，因为直接改变 data 会触发 update -> render -> diff -> apply diff
  18.       // this.data.rotateZ += 2
  20.       //快，因为直接操作 dom
  21.       this.animDiv.rotateZ += 2
  22.       //同步 transform 给 data 防止任何 update
  23.       this.data.rotateZ = this.animDiv.rotateZ
  24.     }, 16)
  27.   }
  28.   render(props, data) {
  29.     return (
  30.       <css3-transform rotateZ={data.rotateZ} translateX={0} perspective={0} >
  31.         <div ref={this.linkRef}>
  32.           omi-transform
  33.           </div>
  34.       </css3-transform>
  35.     )
  36.   }
  37. }
  39. render(<my-app />, "body");

你可以通过上面展示的简单小技巧直接操作 DOM 获取高效的运动性能并且也能应对任何形式的组件更新而不丢失状态。