javascript - Implement a SlideToggle Functionality with React.js - Stack Overflow

admin管理员组

文章数量:1302303

I'd like to acplish the following with my drop down menu.

1 - Show it upon click

2 -Hide it on second click

3 - Hide it when clicking anywhere outside of it.

4 - Do all that with a slide effect

I've got 1-3 covered. I'm blocked on 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.

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 ponent 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>
        )
    }
}

I'd like to acplish the following with my drop down menu.

1 - Show it upon click

2 -Hide it on second click

3 - Hide it when clicking anywhere outside of it.

4 - Do all that with a slide effect

I've got 1-3 covered. I'm blocked on 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.

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 ponent 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>
        )
    }
}

• javascript
• reactjs
• ecmascript-6

Share Follow edited Feb 8, 2018 at 20:40 Jonca33 asked Feb 8, 2018 at 19:03 Jonca33Jonca33 3,49377 gold badges2828 silver badges3939 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

A while ago I figured out how to apply a slide-down effect to a React ponent, it's not exactly the same behavior but you might find my code & description useful. See my answer to a different, related question here: https://stackoverflow./a/48743317/1216245 [Edit: It was deleted since then, so I'm pasting the description below.]

The blog post is here: 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 ponent that you'd like to slide in a CSSTransitionGroup. (You can read more about this React Add-on here: https://reactjs/docs/animation.html#high-level-api-reactcsstransitiongroup and here: https://reactmunity/react-transition-group/.)

<div className="ponent-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:

/*
  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 menting out this part to see how the animation looks without the container involved.
*/

.ponent-container {
  height: $ponent-height; // set to the width of your ponent or a higher approximation if it's not fixed
  min-width: $ponent-width; // set to the width of your ponent 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/.

What aboot using CSS transitions? UI Animations with React — The Right Way

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./-drawings_csp14518596.jpg" />
</div>

I hope it helps :)

本文标签： javascriptImplement a SlideToggle Functionality with ReactjsStack Overflow