使用React.js实现SlideToggle功能

Question

我想通过下拉菜单完成以下操作。

1-点击显示

2-双击隐藏它

3-单击其外部的任何地方时将其隐藏。

4-通过滑动效果完成所有操作

我已经被1-3覆盖了。 我被封锁4。

如何在下面发生单击事件的同时创建幻灯片效果？

我已经使用jQuery的slideToggle（此处未显示）获得了有效的概念证明…但是，我想学习如何以反应方式进行操作。

如果您想查看完整的代码： react下拉导航栏

// 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组件，它的行为并不 完全相同
，但是您可能会发现我的代码和说明有用。[编辑：此后已删除，因此我在下面粘贴说明。_

博客文章在这里： http :
//blog.lunarlogic.io/2018/slidedown-menu-in-
react/

。随意窃取代码的任何部分。

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

至于React /
JSX部分，您将要滑动的组件包装在CSSTransitionGroup中。（您可以在这里阅读更多有关此React附加组件的信息：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/。