最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - What does transitionEnterTimeouttransitionLeaveTimeout actually do in React? - Stack Overflow

programmeradmin0浏览0评论

When animating an element in React we can use a snippet such as:

      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>

Along with the plimenting css animations.

I have read the docs (found here: .html)but I am not 100% sure what the two timeout attributes actually do? I would hazard a guess and say they are a fallback if the animation doesn't plete?

Should the values match the css in/out duration values, or should they be greater than the animation values?

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

When animating an element in React we can use a snippet such as:

      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>

Along with the plimenting css animations.

I have read the docs (found here: https://facebook.github.io/react/docs/animation.html)but I am not 100% sure what the two timeout attributes actually do? I would hazard a guess and say they are a fallback if the animation doesn't plete?

Should the values match the css in/out duration values, or should they be greater than the animation values?

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}
Share Improve this question edited Sep 27, 2016 at 19:52 Sam Sedighian 8951 gold badge7 silver badges21 bronze badges asked Feb 23, 2016 at 6:40 ChrisChris 58.3k33 gold badges157 silver badges196 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

They indicate how long the associated CSS transitions take to plete. You should set these values to the same values you use in your CSS classes for the transition attribute.

ReactCSSTransitionGroup then uses this to determine when it should consider the elements added and removed so it can take the correct action. It used to do this by listening for callbacks, however, this turned out to be really unreliable since there were lots of instances where the callbacks were never called. This would cause elements to never be removed after the transition ended, for example.

发布评论

评论列表(0)

  1. 暂无评论