簡單的css動畫不能在動態reactjs元素上工作

Question

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

Answer 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展示它是如何工作:)