простая анимация css, не работающая над элементом dynamic reactjs

Question

Отметьте фрагмент кода codenen 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 показывает, как это работает :)