ReactJS onClick ReactCSSTransitionGroup 动画

Question

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

TLDR; 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-selector 与 React 组件状态分离。有更好的方法来管理状态派生的 css 选择器

按照这些思路做一些事情。这是我在我的 FE 中使用的一种常见模式，即跨多个项目的 React 代码库。它易于维护并使用纯 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-selector 处理动画，就像上面的代码 sn-p 一样。

不要只在需要在 React 中制作动画时使用 ReactCSSTransitionGroups；这是过度设计。

在您对动画感兴趣的最父选择器上设置一个过渡属性。像这样的...

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

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

.nav--open {
  opacity: 1;
}

这里是 link to a simple, Vanilla JS example 应用 CSS 选择器可以为您的动画做什么。

这是一个使用 React 和基本 CSS 转换的link to an example。

这是一个使用 React 和 CSSTransitionGroup 的 link to another example，其中 DOM 元素正在从 DOM 中安装和卸载。

希望这会有所帮助！

Answer 2

您应该在 onClick 处理程序中删除 ReactCSSTransitionGroup 的子级。像这样的东西应该可以工作：

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