ReactJS onClick ReactCSSTransitionGroup动画

Question

我是新的反应和反应动画。因此，在页面加载上使用“出现”动画，一切都正常。但现在我有问题了。当我点击导航时，我希望新的div不只是立即出现，而是慢慢淡入(或任何其他动画为母亲)，但它不工作。

onClick事件不会使它设置的动画成为一个新类。

另外，也许有人知道如何使ReactCSSTransitionGroup工作，只有当我浏览到网站的一部分？谢谢!

import React from "react";
import ReactDOM from "react-dom";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";

export default class Nav extends React.Component {
constructor() {
    super();
    this.state = {
        navStatus: "navHide"
    };
}

navClose(e) {
    e.stopPropagation();
    this.setState({
        navStatus: "navHide",
        navLines: "navLines show"
    });
}

navOpen() {
    this.setState({
        navStatus: "navShow",
        navLines: "navLines hide"
    });
}


render() {
    return(
        <nav>
            <div className={this.state.navLines} onClick={this.navOpen.bind(this)}>
            </div>
            <ReactCSSTransitionGroup transitionName="navShow" transitionAppear={true} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
            <div id="myNav" className={this.state.navStatus}>
                <div className="navClose" onClick={this.navClose.bind(this)}>
                    <img className="navCloseBtn" src="svg/close.svg"></img>
                </div>
            </div>
        </ReactCSSTransitionGroup>
        </nav>
    );
}

}

Answer 1

我将删除处理CSS类的状态。最好将css选择器与您的反应性组件状态解耦。有一种更好的方法来管理状态派生css选择器

沿着这条路线做点什么。这是我在FE中使用的一个常见模式，跨多个项目反应代码库。它易于维护和使用纯JS来管理BEM选择器的创建。

render() {
  const { isOpen } = this.state;

  const classnames = [
    'nav',
    isOpen && 'nav--open'
  ].filter(Boolean);

  return (
    <nav className={classnames.join(' ')}>
      ...
    </nav>
  );
}

现在让我们来谈谈ReactCSSTransitionGroup。当您试图添加连接到DOM元素的动画时，请使用此附加组件，从DOM树中挂载和卸载。如果元素没有离开DOM树，那么使用css-选择器处理动画，就像上面的代码片段一样。

不要只在需要动画的时候使用ReactCSSTransitionGroups；这是过度的工程。

在您感兴趣的父选择器上设置一个转换属性。就像这样..。

.nav {
  ...
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

现在，将以下CSS添加到动态应用的CSS选择器(即状态派生CSS-选择器)中。

.nav--open {
  opacity: 1;
}

这是一个应用CSS-选择器可以为你的动画做什么的链接到一个简单的Vanilla JS示例。

下面是一个使用React和基本CSS转换的链接到示例。

下面是一个使用React和CSSTransitionGroup的CSSTransitionGroup，其中DOM元素正在从DOM中挂载和卸载。

希望这能有所帮助！

Answer 2

您应该在ReactCSSTransitionGroup处理程序中删除onClick的子级。像这样的事情应该有效：

navClose(e) {
  this.setState({visible: false});
},

navOpen(e) {
  this.setState({visible: true});
}


render() {
  return(
      <nav>
        <div className={this.state.navLines} onClick={this.navOpen.bind(this)}>
        </div>
        <ReactCSSTransitionGroup transitionName="navShow" transitionAppear={true} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
        { this.state.visible &&
          <div id="myNav" className={this.state.navStatus}>
            <div className="navClose" onClick={this.navClose.bind(this)}>
                <img className="navCloseBtn" src="svg/close.svg"></img>
            </div>
          </div>
        }
      </ReactCSSTransitionGroup>
    </nav>
  );
}