omi-transform

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

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

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