Question

我有一个ajax转换，只要Component从服务器获取数据，就可以通过在render() - Method中设置className“fetching”来应用于DOM元素。在fetch()返回后，我将删除该className，以便Component可以转换回其原始外观。

它的工作原理如下：

fetchStuff() {
    this.setState({fetching: true})
    fetch(stuff)
    .then(answer => {
       // do stuff with the answer
       this.setState({fetching: false})
    )
}

// and then ...
render() {
    let {fetching} = this.state
    return <div className={'my-component' + (fetching ? ' fetching' : '')}></div>
 }

.my-component {
  transition: all .3s;
  opacity: 1;
 }

.my-component.fetching {
  opacity: 0;
 }

开始过渡工作正常！但是当React删除“获取”className时，Component会跳转到其原始外观而不进行转换。

我该怎么办？谢谢你的帮助：）

UPDATE：

不知何故，这个问题在Chrome中比在Firefox中更常出现。

更新2：

在父组件上使用shouldComponentUpdate()防止不必要的重新渲染使其变得更好，但转换有时会跳过或过快。但有时它现在应该是平滑的。

React：删除css className中断转换

UPDATE：

更新2：

0 个答案: