javascript - ReactJS onClick ReactCSSTransitionGroup 动画

Question

我是 React 和 React 动画的新手。因此，随着页面加载上的“出现”动画，一切正常。但现在我有一个问题。当我单击导航时，我希望新的 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-selectors 与 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-selectors 来处理你的动画。

当你需要在 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 选择器可以为您的动画做什么。

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

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

希望这对您有所帮助!