Javascript ReactJS onClick ReactCSTransanitionGroup动画

我是一个新的反应和反应动画。因此，通过页面加载上的“显示”动画，一切正常。但现在我有一个问题。当我单击导航时，我希望新的div不仅立即显示，而且慢慢淡入（或该母亲的任何其他动画），但它不起作用

TLDR；onClick事件不会使动画成为一个新类

另外，也许有人知道只有当我浏览到网站的某个部分时，如何使ReactCSTranssitionGroup工作？谢谢大家!

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

从“React”导入React；
从“react dom”导入react dom；
从“react插件css转换组”导入ReactCSTranslationGroup；
导出默认类Nav.Component{
构造函数（）{
超级（）；
此.state={
导航状态：“导航隐藏”
};
}
导航关闭（e）{
e、 停止传播（）；
这是我的国家({
导航状态：“导航隐藏”，
导航线：“导航线显示”
});
}
navOpen（）{
这是我的国家({
导航状态：“导航显示”，
导航线：“导航线隐藏”
});
}
render（）{
返回(
);
}

---

}

您应该在onClick处理程序中删除

reactcstranitiongroup

的子级。像这样的方法应该会奏效：

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

导航关闭（e）{
this.setState（{visible:false}）；
},
导航开放（e）{
this.setState（{visible:true}）；
}
render（）{
返回(
{this.state.visible&&
}
);
}

我将删除处理CSS类的状态。最好将css选择器与React组件状态分离。有一种更好的方法可以管理从状态派生的css选择器

按照这些思路做一些事情。这是我在FE中使用的一种常见模式，可以跨多个项目反应代码库。它易于维护，并使用纯JS管理BEM选择器的创建

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

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

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

现在将以下CSS添加到动态应用的CSS选择器（即状态派生的CSS选择器）

下面是一个应用CSS选择器可以为您的动画做些什么的示例

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

下面是一个使用React和cstransitiongroup的示例，其中DOM元素正在从DOM装载和卸载

---

希望这有帮助

bind（…）

调用过多。删除

this.fn=this.fn.bind（this）

语句。这些都没有吸引力，也没有必要。您还在onClick处理程序中调用

this.navClose.bind（this）

，这让我想知道为什么您首先要生成别名……当然，我想一想。我把它拿走了，看起来没有任何意义。不管怎样，也许你可以打电话给ReactCSTransationingGroup帮我解决问题？见下面我的答案。我经常与React-CstransitingGroup合作，可以回答您可能遇到的许多问题。如果您想举一个例子来说明这一点，请告诉我，我可以创建一个简单的React示例。如果问得不多，那就太棒了@xoomer这是一个没有ReactCSTransanitionGroup的示例。注意：它不会从页面中删除导航。我将附加一个从DOM中删除它的版本。@xoomer这里是另一个使用CSSTransitionGroup的示例，其中DOM元素将自己从DOM树中删除。

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

.nav--open {
  opacity: 1;
}