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

时间:2017-02-16 06:50:49

标签: reactjs css-transitions css-animations

检查codepen http://codepen.io/anon/pen/EZJjNO的代码段 单击添加按钮,它将添加另一个项目,但它立即出现,没有任何淡入淡出效果。

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;
}

1 个答案:

答案 0 :(得分:2)

由于默认情况下会添加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展示它的运作方式:)