css - ReactJS — 如何使用 createRef() 修改 CSS 属性？

Question

我试图在 FullPageJS 中更改页面更改时将垂直移动添加到堆叠标题列表中。我完全没有错误，但行动没有发生。我的猜测是我尝试使用元素 ref 修改 CSS 属性转换是错误的。任何人都可以发现下面的代码有问题吗？

先感谢您。

反应

  componentDidMount() {
    titleWidth = this.title.current.clientHeight
    titleHeight = this.title.current.clientHeight
    this.mask.current.css = {
      height: titleHeight + "px",
      width: titleWidth + "px",
    }
    this.frame.current.css = { top: titleHeight + "px" }
  }

  onLeave(origin, destination, direction) {
    console.log("Leaving section " + origin.index)

    // Actions not working
    if (direction == "down") {
      this.frame.current.style.transition = { top: "-=" + titleHeight }
    } else if (direction == "up") {
      this.frame.current.style.transition = { top: "+=" + titleHeight }
    }
  }

HTML

<div id="wrapper--frame" className="flex justify-center">
  <div ref={this.mask} id="mask" className="w-5/6 overflow-hidden">
    <div ref={this.frame} id="frame">
      <div ref={this.title} className="text-p frame--title ">
        One
      </div>
      <div ref={this.title} className="text-p frame--title ">
        Two
      </div>
      <div ref={this.title} className="text-p frame--title ">
        Three
      </div>
      <div ref={this.title} className="text-p frame--title ">
        Four
      </div>
    </div>
  </div>
</div>

标签： cssreactjscss-transitionsfullpage.js