간단한 CSS 애니메이션이 동적 반응 요소에서 작동하지 않음

Question

코드 조각에서 코드 조각 확인 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 다음 fade 클래스는 기본적으로 추가됩니다

.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

때문에, 당신은 전환 효과를 얻을 수 없습니다. 브라우저의 개발자 도구를 열고 클래스를 제거하면 멋지게 사라집니다.

이 당신이 원하는 것을 얻을 수있는 몇 가지 방법,하지만 난 그냥과 같이 키 프레임 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가 어떻게 작동하는지 보여주는 :)