Question

我的组件代码编译没有错误，并且可以像添加CSSTransition包装器和TransitionGroup包装器之前一样运行。但是，当其中一个单元被删除时，没有过渡。过渡对我来说都是新事物，所以能得到帮助。

代码如下。

render() {
  // Create an array of Chartcells
  let cells = this.props.chartArray.map((obj, index) => (
    <CSSTransition key={index} classNames="example" timeout={{ enter: 500, exit: 300 }}>
      <Chartcell key={index.toString()} handleClick={this.props.handleClick} cellObject={obj} />
    </CSSTransition>
  ))
  return (
    <div id="charts-host" className="charts-host">
      <TransitionGroup>
        {cells}
      </TransitionGroup>
    </div>
  )
}

CSS代码在这里：

#charts-host {
  position: relative;
  overflow: auto;
  width: 100%;
  background-color: #f5f5f5;
  margin-top: 60px;
}

.charts-host {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  grid-auto-rows: minmax(300px, auto);
  grid-gap: 10px;
  border-bottom: 1px solid #ced4da;
}

.example-enter {
  opacity: 0.01;
}

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

.example-exit {
  opacity: 1;
}

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

这只是我的事，这是一个问题，因为我要删除的DOM元素每个都是CSS网格行中的一个项目，而不是数组中的项目？能否删除CSS网格行是无效的配置？

此外，DOM对象也是应用程序状态的一部分，并由Redux操作删除。因此，这将触发从父容器进行的完整渲染，以渲染完整的显示而无需删除子对象。这可能会覆盖过渡，对吧？

那么这种过渡是否可能？

我按照示例使用react-transition-group v2，但没有发生过渡。怎么了？

0 个答案: