Реализуйте функциональность 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 ответа:
Некоторое время назад я понял, как применить эффект скольжения вниз к компоненту 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>
Надеюсь, это поможет :)