React CSSTransitionGroup ne fonctionne pas (n'ajoute pas de classes)

Question

Je travaille actuellement sur un composant de notification dans React. Il fonctionne à l'exception des transitions D'une certaine manière, il n'ajoute même pas de classe. J'ai regardé quelques exemples d'animation React et j'ai fait quelques recherches mais je n'ai rien trouvé d'utile. Surtout des articles pour React15. Je n'ai pas compris, cela devrait fonctionner parfaitement mais il s'agit juste d'afficher et de cacher du texte sans aucune transition.

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

Et le fichier 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

Assurez-vous que l'attribut clé est défini.

Extrait du document : https://facebook.github.io/react/docs/animation.html

N Vous devez fournir l'attribut key pour tous les enfants de ReactCSSTransitionGroup, même si vous ne rendez qu'un seul élément. C'est ainsi que React déterminera quels enfants sont entrés, sortis ou restés.