Реализуйте функциональность SlideToggle с помощью React.JS


Я хотел бы выполнить следующее С помощью выпадающего меню.

1-показать его по щелчку

2-скрыть его при втором щелчке мыши

3-скрыть его при нажатии в любом месте за его пределами.

4-Сделайте все это с эффектом слайда

У меня есть 1-3 покрытых. я заблокирован на 4.

Как бы я создал эффект слайда вместе со следующим событием щелчка, происходящим ниже?

У меня есть рабочее доказательство концепции с помощью slideToggle от jQuery (здесь не показано)... тем не менее, я хотел бы узнать, как это сделать, реагируя таким образом.

В случае, если вы хотите увидеть полный код: react выпадающая панель навигации

// 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>
        )
    }
}
2 3

2 ответа:

Некоторое время назад я понял, как применить эффект скольжения вниз к компоненту React, это не точно то же самое поведение, но вы можете найти мой код и описание полезными. Смотрите мой ответ на другой, связанный с этим вопрос здесь: https://stackoverflow.com/a/48743317/1216245 [Edit: с тех пор он был удален, поэтому я вставляю описание ниже.]

Запись в блоге здесь: http://blog.lunarlogic.io/2018/slidedown-menu-in-react/. Не стесняйтесь украсть любую часть кода.


Вот краткое описание наиболее важных частей решения.

Что касается части React/JSX, вы оборачиваете компонент, который вы хотели бы скользить в CSSTransitionGroup. (Вы можете прочитать больше об этом дополнении 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>

Обратите внимание, что это все завернутый в контейнер, который вам понадобится, чтобы анимация работала так, как вам бы хотелось.

А вот 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 
}

Для полного примера и демонстрации проверьте http://blog.lunarlogic.io/2018/slidedown-menu-in-react/.

Что делать с использованием CSS-переходов? UI анимации с React-правильный путь

В качестве примера я нашел этот слайд-эффект,который может быть реализован на вашей навигационной панели.

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

Надеюсь, это поможет :)