[英]Implement a SlideToggle Functionality with React.js
I'd like to accomplish the following with my drop down menu. 我想通过下拉菜单完成以下操作。
1 - Show it upon click 1 - 单击显示
2 -Hide it on second click 2 - 在第二次点击时隐藏它
3 - Hide it when clicking anywhere outside of it. 3 - 单击其外的任何位置时隐藏它。
4 - Do all that with a slide effect 4 - 用幻灯片效果做所有这些
I've got 1-3 covered. 我有1-3个被覆盖。 I'm blocked on 4.
我被封锁了4。
How would I create a slide effect along with the following click event happening bellow? 如何创建幻灯片效果以及下面发生的点击事件?
I've got a working proof of concept using jQuery's slideToggle (not shown here)... however, I'd like to learn how to do it in the react way. 我使用jQuery的slideToggle(这里没有显示)得到了一个可靠的概念证明...但是,我想学习如何以反应的方式做到这一点。
in case you'd like to see the full the code: 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>
)
}
}
A while ago I figured out how to apply a slide-down effect to a React component, it's not exactly the same behavior but you might find my code & description useful. 前段时间我想出了如何将一个向下滑动的效果应用于React组件,它的行为并不完全相同 ,但您可能会发现我的代码和描述很有用。 See my answer to a different, related question here: https://stackoverflow.com/a/48743317/1216245 [Edit: It was deleted since then, so I'm pasting the description below.]
请在此处查看我对其他相关问题的回答: https : //stackoverflow.com/a/48743317/1216245 [编辑:此后它被删除,所以我将粘贴下面的说明。]
The blog post is here: http://blog.lunarlogic.io/2018/slidedown-menu-in-react/ . 博客文章在这里: http : //blog.lunarlogic.io/2018/slidedown-menu-in-react/ 。 Feel free to steal any part of the code.
随意窃取代码的任何部分。
Here's a short description of the most important parts of the solution. 以下是解决方案最重要部分的简短说明。
As for the React/JSX part, you wrap the component that you'd like to slide in a CSSTransitionGroup. 对于React / JSX部分,您将在CSSTransitionGroup中包装要滑动的组件。 (You can read more about this React Add-on here: https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup and here: https://reactcommunity.org/react-transition-group/ .)
(您可以在此处阅读有关此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>
Note that it's all wrapped in a container, which you'll need for the animation to work like you'd like it to. 请注意,它全部包含在一个容器中,您需要动画才能像您希望的那样工作。
And here is the CSS I used for the slide animation effect: 这是我用于幻灯片动画效果的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
}
For the full example & demo check out http://blog.lunarlogic.io/2018/slidedown-menu-in-react/ . 有关完整示例和演示,请查看http://blog.lunarlogic.io/2018/slidedown-menu-in-react/ 。
What aboot using CSS transitions? 什么使用CSS过渡? UI Animations with React — The Right Way
使用React的UI动画 - 正确的方法
As an example I found this slide effect that could be implemented on your navbar. 作为一个例子,我发现这个幻灯片效果可以在你的导航栏上实现。
.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>
I hope it helps :) 我希望它有帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.