React CSSTransitionGroup이 작동하지 않습니다 (클래스를 추가하지 않습니다)

Question

현재 React에서 알림 구성 요소를 작성 중입니다. 그것은 전환을 제외하고 일하고있다. .. 어떻게 든 그것은 심지어 학급을 추가하지 않는다. React 애니메이션 예제를 찾아 보았지만 약간의 연구를했지만 유용한 것을 찾지 못했습니다. 특히 React15에 대한 기사. 나는 이해하지 못했다. 이것은 완벽하게 작동해야하지만, 전환없이 텍스트를 그냥 보이고 숨기는 것이다.

import React, { Component } from 'react'; 
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; 
import '../stylesheets/notification.less'; 

export default class Notifications extends Component { 
    render() { 
     return (
      <CSSTransitionGroup transitionName="notifications" transitionEnterTimeout={300} transitionLeaveTimeout={300}> 
        <div className={this.props.type === 'error' ? 'notification-inner warning' : 'notification-inner success'}> 
         {this.props.type} {this.props.message} 
        </div> 
      </CSSTransitionGroup> 
     ); 
    } 
} 

그리고 CSS 파일 ...

.notifications { 
    background:#000; 
} 
.notifications-enter { 
    opacity: 0; 
    transform: translate(-250px,0); 
    transform: translate3d(-250px,0,0); 
} 
.notifications-enter.notifications-enter-active { 
    opacity: 1; 
    transition: opacity 1s ease; 
    transform: translate(0,0); 
    transform: translate3d(0,0,0); 
    transition-property: transform, opacity; 
    transition-duration: 300ms; 
    transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear; 
} 
.notifications-leave { 
    opacity: 1; 
    transform: translate(0,0,0); 
    transform: translate3d(0,0,0); 
    transition-property: transform, opacity; 
    transition-duration: 300ms; 
    transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear; 
} 
.notifications-leave.notifications-leave-active { 
    opacity: 0; 
    transform: translate(250px,0); 
    transform: translate3d(250px,0,0); 
} 

Answer 1

는 키 속성이 설정되어 있는지 확인합니다. 다큐먼트에서

: https://facebook.github.io/react/docs/animation.html

참고 : 단 하나의 항목을 렌더링 할 때 당신은 심지어 ReactCSSTransitionGroup의 모든 아이들을위한 키 속성을 제공해야합니다. 이것이 React가 어떤 아이들이 들어 왔는지, 떠났는지, 또는 머물렀는지를 결정하는 방법입니다.