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不工作（不添加类）

回答

相关问题