React CSSTransitionGroup不工作（不添加類）

我目前正在處理React中的通知組件。它正在工作，除了過渡。不知何故它甚至沒有添加類。我查了一些React動畫的例子，我做了一些研究，但我找不到任何有用的東西。特別是React15的文章。我不明白，這應該完美，但它只是顯示和隱藏的文本沒有任何轉換。React CSSTransitionGroup不工作（不添加類）

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

來源

2017-04-19 B.Sak

請確保您有關鍵屬性設置。

從DOC：https://facebook.github.io/react/docs/animation.html

注：必須爲ReactCSSTransitionGroup的所有兒童提供關鍵屬性，甚至只呈現單個項目時。這就是React如何確定哪些孩子進入，離開或留下的。

來源

2017-05-02 07:49:17 Nozomi

是的！謝謝。我花了一個小時試圖從我的項目中複製工作過渡，但無法想到「關鍵」解決方案:) –

React CSSTransitionGroup不工作（不添加類）

回答

相關問題