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

1-点击显示

2-双击隐藏它

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

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

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

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

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

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

{ this.node = node; }}>

Services +

{this.state.dropdown &&

(

• { this.node = node; }}>
• Web Design
• Web Development
• Graphic Design

)}

)

}

}

解决方法:

不久前,我想出了如何将下滑效果应用于React组件,它的行为并不完全相同,但是您可能会发现我的代码&说明很有用.在这里查看我对另一个相关问题的答案：https://stackoverflow.com/a/48743317/1216245 [编辑：从那时起它已被删除,因此我在下面粘贴说明.

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

请注意,所有内容都包装在一个容器中,动画需要它才能像您希望的那样工作.

这是我用于幻灯片动画效果的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

}

标签：ecmascript-6,reactjs,javascript

来源： https://codeday.me/bug/20191025/1928137.html