最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React animation not working - Stack Overflow

programmeradmin2浏览0评论

I have a Notification class to manage creating/removing Notifications from the UI. I can successfully show/hide notifications, but the notifications do not animate in/out.

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

  }

}

I have a Notification class to manage creating/removing Notifications from the UI. I can successfully show/hide notifications, but the notifications do not animate in/out.

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

  }

}
Share Improve this question edited Apr 27, 2015 at 15:08 Felix Kling 817k181 gold badges1.1k silver badges1.2k bronze badges asked Apr 26, 2015 at 23:26 bchernybcherny 3,1722 gold badges28 silver badges36 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

ReactCSSTransitionGroup will only animate its children when they are added or removed from its props. In your case, the children prop of your ReactCSSTransitionGroup never changes.

Here's an example of what you could do instead:

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

  }

}

Every time a notification is added or removed, its corresponding element is added or removed from the children prop of ReactCSSTransitionGroup, which can then animate it in or out properly.

You can add transitionAppear={true} to your <ReactCSSTranstionGroup /> to make it animate the initial render.

It is disabled by default: https://github./facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroup.js#L38

发布评论

评论列表(0)

  1. 暂无评论