我想通過下拉菜單完成以下操作.

1-點(diǎn)擊顯示

2-雙擊隱藏它

3-單擊其外部的任何地方時將其隱藏.

4-通過滑動效果完成所有操作

我已經(jīng)被1-3覆蓋了.我被封鎖4.

如何在下面發(fā)生以下單擊事件的同時創(chuàng)建幻燈片效果？

我已經(jīng)使用jQuery的slideToggle(此處未顯示)獲得了有效的概念證明……但是,我想學(xué)習(xí)如何以反應(yīng)方式進(jìn)行操作.

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

)}

)

}

}

解決方法:

不久前,我想出了如何將下滑效果應(yīng)用于React組件,它的行為并不完全相同,但是您可能會發(fā)現(xiàn)我的代碼&說明很有用.在這里查看我對另一個相關(guān)問題的答案：https://stackoverflow.com/a/48743317/1216245 [編輯：從那時起它已被刪除,因此我在下面粘貼說明.

這是解決方案最重要部分的簡短描述.

transitionName="slide"

transitionEnterTimeout={300}

transitionLeaveTimeout={300}

>

{ this.state.showComponent && }

請注意,所有內(nèi)容都包裝在一個容器中,動畫需要它才能像您希望的那樣工作.

這是我用于幻燈片動畫效果的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

}

標(biāo)簽：ecmascript-6,reactjs,javascript

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

總結(jié)

以上是生活随笔為你收集整理的html5 sidetoggle,javascript-使用React.js实现SlideToggle功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。