2017-04-19 91 views
1

我目前正在處理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); 
} 

回答

4

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

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

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

+0

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