使用React.js实现SlideToggle功能

Question

我希望通过下拉菜单实现以下功能：

1- 单击显示它

2- 再次单击隐藏它

3- 单击菜单外任何地方都会隐藏它。

4- 使用滑动效果完成上述所有操作。

我已经完成了1-3，但是在第4步卡住了。

请问如何创建滑动效果并与下面的单击事件一起发生？

我已经使用jQuery的slideToggle创建了一个可行的概念验证（此处未显示）...... 但是，我想学习如何以react方式完成它。

如果您想查看完整代码： 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>
        )
    }
}

- Jonca33

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/。

- Julia Jacobs

---

非常感谢，Julia。这正是我在寻找的！我会去查看它。 - Jonca33

Answer 2

使用CSS转换怎么样？React中的UI动画——正确方式

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

.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>

希望能对你有所帮助 :)

- Andres Jimenez

---

我将包含的<a/>视为我的#wrapper，<ul/>作为.slide，传递了样式，但是没有任何反应。行为与之前相同。（显示/隐藏） - Jonca33