使用 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 插件的更多信息：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/。

Answer 2

如何使用 CSS 过渡？ UI Animations with React — The Right Way

作为一个例子，我发现这个幻灯片效果可以在你的导航栏上实现。

.wrapper {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

<div class="wrapper">
    <img id="slide" src="https://cdn.xl.thumbs.canstockphoto.com/-drawings_csp14518596.jpg" />
</div>

希望对你有帮助:)