简单的css动画不适用于动态reactjs元素答案

【问题标题】：simple css animation not working on dynamic reactjs element简单的css动画不适用于动态reactjs元素
【发布时间】：2017-07-05 03:30:14
【问题描述】：

在 codepen http://codepen.io/anon/pen/EZJjNO 检查 sn-p 单击添加按钮，它将添加另一个项目，但它会立即出现而没有任何淡入淡出效果。

JS：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.addItem = this.addItem.bind(this);

    this.state = {
      items: [1,2,3]
    }
  }

  addItem() {
    var items = this.state.items;
    items.push(4);
    this.setState({
      items: items
    })
  }
  render() {
    return (
      <div className="App">
        {
          this.state.items.map(function(i) {
            return <div className="item fade">Testing</div>
          })
        }
        <button onClick={this.addItem}>Add</button>
      </div>
    );
  }
}

React.render(<App />, document.body);

CSS：

.App {
  background-color: rgba(0,0,0, 0.5);
  text-align: center;
  height: 100vh;
}
div.item {
  border: 1px solid #ccc;
  padding: 10px;
  background: #123456;
  color: #fff;
  opacity: 0;
  transition: all 0.4s ease-out;
}
.fade {
  opacity: 1 !important;
}

【问题讨论】：

标签： reactjs css-transitions css-animations

【解决方案1】：

由于默认添加了fade类，所以不会得到过渡效果。如果您打开浏览器的开发人员工具并删除该类，您会看到它很好地消失了。

有几种方法可以得到你想要的，但我只需要像这样使用关键帧 CSS 动画：

.fade {
  animation: 0.4s ease-out fadeIn 1;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

Here's a fork of your code pen 展示了它是如何工作的:)

【讨论】：