Javascript 反应动画不工作

我有一个

Notification

类来管理从UI创建/删除通知。我可以成功地显示/隐藏通知，但通知不会以动画形式显示

import React from 'react'
import addons from 'react/addons'

const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup

let id = 0
export default class Notification {

  constructor (content, className) {

    let div = document.createElement('div')
    document.body.appendChild(div)

    let onClose = () => React.unmountComponentAtNode(div)

    React.render(
      <NotificationElement className={ className } id={ id++ } onClose={ onClose }>
        { content }
      </NotificationElement>,
      div
    )

  }

}

class NotificationElement extends React.Component {

  constructor(_) {
    super(_)
  }

  render() {

    const className = `Notification ${ this.props.className }`

    return (
      <ReactCSSTransitionGroup transitionName="slideIn">
        <div className={ className } key={ this.props.id }>
          { this.props.children }
          <a className="close-button" onClick={ this.props.onClose }>&times;</a>
        </div>
      </ReactCSSTransitionGroup>
    )

  }

}

从“React”导入React
从“react/addons”导入加载项
const React cstransitiongroup=React.addons.cstransitiongroup
设id=0
导出默认类通知{
构造函数（内容、类名）{
设div=document.createElement（'div'）
document.body.appendChild（div）
让onClose=（）=>React.unmountComponentAtNode（div）
反应(
{content}
,
div
)
}
}
类NotificationElement扩展了React.Component{
构造函数{
超级
}
render（）{
const className=`Notification${this.props.className}`
返回(
{this.props.children}
&时代；
)
}
}

reactcstransitiongroup

仅在从其

道具中添加或删除其子对象时才会设置其动画。在您的情况下，
reactcstransitinggroup
的
children
属性永远不会更改

下面是一个可以替代的示例：

let notificationsContainer = document.createElement('div');
document.body.appendChild(notificationsContainer);

let notifications = [];
function renderNotifications() {
  React.render(<Notifications notifications={notifications} />, notificationsContainer);
}

class Notifications extends React.Component {

  render() {
    return (
      <ReactCSSTransitionGroup transitionName="slideIn">
        {this.props.notifications.map(notification =>
          <NotificationElement
            key={ notification.id }
            className={ notification.className }
            onClose={ notification.onClose }
            children={ content }
            />
        )}
      </ReactCSSTransitionGroup>
    );
  }

}

let id = 0
export default class Notification {

  constructor (content, className) {

    let notification = {
      id: id++, content, className,
    };

    notification.onClose = () => {
      notifications.splice(notifications.indexOf(notification), 1);
      renderNotifications();
    };

    notifications.push(notification);
    renderNotifications();

  }

}

class NotificationElement extends React.Component {

  constructor(_) {
    super(_)
  }

  render() {

    const className = `Notification ${ this.props.className }`

    return (
      <div className={ className }>
        { this.props.children }
        <a className="close-button" onClick={ this.props.onClose }>&times;</a>
      </div>
    )

  }

}

let notificationscocontainer=document.createElement（'div'）；
文档.正文.附件（通知容器）；
让通知=[]；
函数renderNotifications（）{
反应。呈现（，通知容器）；
}
类通知扩展了React.Component{
render（）{
返回(
{this.props.notifications.map（notification=>
)}
);
}
}
设id=0
导出默认类通知{
构造函数（内容、类名）{
让通知={
id:id++，内容，类名，
};
notification.onClose=（）=>{
通知.splice（通知.indexOf（通知），1）；
renderNotifications（）；
};
通知。推送（通知）；
renderNotifications（）；
}
}
类NotificationElement扩展了React.Component{
构造函数{
超级
}
render（）{
const className=`Notification${this.props.className}`
返回(
{this.props.children}
&时代；
)
}
}

每次添加或删除通知时，它对应的元素都会从
reactcstransitiongroup
的
子对象中添加或删除，然后该子对象可以正确地对其进行动画处理。
您可以将
transitionAppear={true}
添加到
以使其对初始渲染进行动画处理

默认情况下它是禁用的：
很遗憾，这并不能解决问题