使用 React.js 实现 SlideToggle 功能

Question

我想用我的下拉菜单完成以下任务。

1 - 单击时显示

2 - 第二次单击时隐藏它

3 - 单击外部任意位置时将其隐藏。

4 - 使用幻灯片效果完成所有这些

我已经覆盖了 1-3 个。我4号就被堵住了

如何创建幻灯片效果以及下面发生的以下单击事件？

我已经使用 jQuery 的 SlideToggle （此处未显示）进行了有效的概念验证...但是，我想学习如何以反应方式做到这一点。

如果您想查看完整的代码： react drop-down nav bar

// CASE 1 Show Hide on click, no slide effect yet  
class ServicesDropdown extends Component {
    constructor() {
        super();
        this.state = {
            dropdown: false
        };
    }

    handleClick = () => {
        if (!this.state.dropdown) {
            // attach/remove event handler
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
            document.removeEventListener('click', this.handleOutsideClick, false);
        }

        this.setState(prevState => ({
            dropdown: !prevState.dropdown,
        }));
    }

    handleOutsideClick = (e) => {
        // ignore clicks on the component itself
        if (this.node.contains(e.target)) {
            return;
        }
        this.handleClick();
    }

    render() {
        return (
            <li ref={node => { this.node = node; }}>
                <a href="#!" onClick={this.handleClick}>Services +</a>
                {this.state.dropdown && 
                (
                    <ul className="nav-dropdown" ref={node => { this.node = node; }}>
                    <li><a href="#!">Web Design</a></li>
                    <li><a href="#!">Web Development</a></li>
                    <li><a href="#!">Graphic Design</a></li>
                    </ul>

                )}
            </li>
        )
    }
}

Answer 1

不久前，我弄清楚了如何将滑动效果应用于 React 组件，它的行为并不完全相同，但您可能会发现我的代码和描述很有用。在这里查看我对另一个相关问题的回答： https: //stackoverflow.com/a/48743317/1216245 [编辑：从那时起它就被删除了，所以我粘贴了下面的描述。]

博客文章在这里： http: //blog.lunarlogic.io/2018/slidedown-menu-in-react/。随意窃取代码的任何部分。

以下是该解决方案最重要部分的简短描述。

至于 React/JSX 部分，您可以将要滑动的组件包装在 CSSTransitionGroup 中。（您可以在此处阅读有关此 React Add-on 的更多信息： https: //reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup和此处： https: //reactcommunity.org/react-transition-group / .)

<div className="component-container">
  <CSSTransitionGroup
    transitionName="slide"
    transitionEnterTimeout={300}
    transitionLeaveTimeout={300}
  >
    { this.state.showComponent && <Component /> }
  </CSSTransitionGroup>
</div>

请注意，它全部包装在一个容器中，您需要该容器才能使动画按照您希望的方式工作。

这是我用于幻灯片动画效果的 CSS：

/*
  Slide animation styles.
  You may need to add vendor prefixes for transform depending on your desired browser support.
*/

.slide-enter {
  transform: translateY(-100%);
  transition: .3s cubic-bezier(0, 1, 0.5, 1);

  &.slide-enter-active {
    transform: translateY(0%);
  }
}

.slide-leave {
  transform: translateY(0%);
  transition: .3s ease-in-out;

  &.slide-leave-active {
    transform: translateY(-100%);
  }
}

/*
  CSS for the submenu container needed to adjust the behavior to our needs.
  Try commenting out this part to see how the animation looks without the container involved.
*/

.component-container {
  height: $component-height; // set to the width of your component or a higher approximation if it's not fixed
  min-width: $component-width; // set to the width of your component or a higher approximation if it's not fixed 
}

有关完整的示例和演示，请查看http://blog.lunarlogic.io/2018/slidedown-menu-in-react/。