React CSSTransitionGroup不起作用（不添加类） [英] React CSSTransitionGroup is not working(Doesnt adding classes)

问题描述

我目前正在研究React中的通知组件。除了过渡，它还在工作。不知何故，它甚至没有添加类。我查阅了一些React动画示例，并进行了一些研究，但找不到任何有用的东西。特别是关于React15的文章。我不明白，这应该可以正常工作，但是它只是显示和隐藏文本而没有任何过渡。

I am currently working on notification component in React. It is working except the transitions.. Somehow its not even adding class. I looked up some React animation examples and i do some research but i couldnt find anything useful. Especially article for React15. I didnt understand, this should work perfectly but its just showing and hiding text without any transitions.

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

推荐答案

请确保您具有密钥属性集。

Make sure you have the key attribute set.

从文档中： https： //facebook.github.io/react/docs/animation.html

注意：
您必须提供即使只渲染一个项目，ReactCSSTransitionGroup的所有子项的key属性。这就是React决定哪些孩子进入，离开或停留的方式。

Note: You must provide the key attribute for all children of ReactCSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.

这篇关于React CSSTransitionGroup不起作用（不添加类）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！