Implement a SlideToggle Functionality with React.js

Question

I'd like to accomplish 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 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>
        )
    }
}

Answer 1

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. 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.]

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 component that you'd like to slide in a 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/ .)

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

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

Answer 2

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

I hope it helps :)