Question

在我的基于React的应用程序中，我正在尝试执行简单的css3宽度转换，如：

Expected input number 1, I or X, to be two-dimensional.

Error in imhist>parse_inputs (line 278)
validateattributes(a,  {'double','uint8','int8','logical','uint16','int16','single','uint32', 
'int32'}, ...

Error in imhist (line 60)
[a, n, isScaled, top, map] = parse_inputs(varargin{:});

我想要做的是在react组件中的一个元素中设置一个样式，即“width：xx％”，并将它的动画设置为0％到xx％。由于渲染时的元素已具有此属性，因此动画无效。我查看了“ReactCSSTransitionGroup”，但没有接近解决方案。我开始乱搞setTimeOut来设置组件渲染后的样式属性，但它感觉非常混乱和“hackish”。有人能指出我正确的方向吗？

Answer 1

如果您尝试在渲染元素后将其设置为动画（从0到n％），可以通过调用setState中的componentDidMount来完成。由于浏览器没有重新渲染在同一动画帧中发生变化的内容，但合并更改并呈现最终结果，您需要将其包装在requestAnimationFrame

中

我在blog post中彻底解释了这一点。

代码将如下所示：

export default class AnimateMe extends Component {
  state = {
    width: 0
  };

  componentDidMount() {
    requestAnimationFrame(() => {
      this.setState({ width: "75%" });
    });
  }

  render() {
    return (
      <div style={{ width: this.state.width }}>
        Animate my width
      </div>
    );
  }
}

我做了一个工作的例子： https://codesandbox.io/s/7z1j794oy1

希望有所帮助！

反应元素宽度动画

1 个答案: