javascript - React element width animation - Stack Overflow

admin管理员组

文章数量:1392007

In my React based application I'm trying to perform a simple css3 width transition like:

.foo {
    transition: width 1s ease-in-out;
}

what I want to do is set a style inside an element in the react ponent which is "width: xx%" and the animate it from 0% to xx%. Since the element when rendered already has this property the animation is not working. I've looked into the "ReactCSSTransitionGroup" but did not e closer to a solution. I started messing around with setTimeOut to set the style attribute after the ponent was rendered but it felt really messy and "hackish". Could someone point me in the right direction?

In my React based application I'm trying to perform a simple css3 width transition like:

.foo {
    transition: width 1s ease-in-out;
}

what I want to do is set a style inside an element in the react ponent which is "width: xx%" and the animate it from 0% to xx%. Since the element when rendered already has this property the animation is not working. I've looked into the "ReactCSSTransitionGroup" but did not e closer to a solution. I started messing around with setTimeOut to set the style attribute after the ponent was rendered but it felt really messy and "hackish". Could someone point me in the right direction?

• javascript
• css
• reactjs
• animation

Share Improve this question Follow asked Mar 30, 2017 at 18:01 martenolofssonmartenolofsson 53111 gold badge55 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

If you are trying to animate the ponent after it has been rendered (from 0 to n%) you can do it by calling setState in ponentDidMount. As browsers are not rerendering stuff that has changed in the same animation frame but merge changes and render the end result, you'll need to wrap it in requestAnimationFrame

I explained it throughly in this blog post.

Code will look like this:

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

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

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

I made a working example: https://codesandbox.io/s/7z1j794oy1

Hope that helps!

本文标签： javascriptReact element width animationStack Overflow