Question

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

1 - 点击后显示

2 - 在第二次点击时隐藏

3 - 点击它外面的任何地方时隐藏它。

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

我已经被1-3覆盖了。我在4岁时被阻止了。

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

我使用jQuery的slideToggle（未在此处显示）获得了一个可靠的概念证明...但是，我想学习如何以反应的方式做到这一点。

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

word-break: break-word

Answer 1

前段时间我想出了如何将一个向下滑动的效果应用于React组件，它不是完全相同的行为，但你可能会发现我的代码＆amp;描述有用。请在此处查看我对其他相关问题的回答：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 
}

完整的例子＆amp;演示结账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>

我希望它有所帮助：）

使用React.js实现SlideToggle功能

2 个答案: