ReactJS onClick ReactCSSTransitionGroup 动画

Question

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

TLDR； onClick 事件不会使它刚刚设置的动画成为新的 class.

也许有人知道如何使 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

您应该在 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>
  );
}

Answer 2

我会删除处理 CSS class 的状态。最好将 css-选择器与 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 处理您的动画-像上面的代码片段一样动态应用的选择器。

当你需要在 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.

安装和卸载

希望对您有所帮助！

ReactJS onClick ReactCSSTransitionGroup 动画

ReactJS onClick ReactCSSTransitionGroup animation

javascript

animation

reactjs

reactcsstransitiongroup