1

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

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

}

4

2 回答 2

2

我会删除处理 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 处理动画，就像上面的代码片段一样。

当你需要在 React 中为某些东西设置动画时，不要只使用 ReactCSSTransitionGroups；这是过度工程。

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

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

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

.nav--open {
  opacity: 1;
}

这是一个简单的 Vanilla JS 示例的链接，该示例说明了应用 CSS 选择器可以为您的动画做什么。

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

这是另一个使用 React 和 CSSTransitionGroup 的示例的链接，其中 DOM 元素正在从 DOM 中安装和卸载。

希望这可以帮助！

于 2016-06-27T18:18:08.773 回答
0

您应该删除ReactCSSTransitionGrouponClick 处理程序中的子级。像这样的东西应该工作：

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>
  );
}
于 2016-06-27T18:16:12.427 回答