如何解决如何使用导航栏的CSS过渡从右向左滑动动画
我正在尝试使用react-transition-group为导航栏创建从右到左的动画幻灯片,但是它不起作用。
这是我的style.css
:
.slide-enter {
transform: translateX(100%);
}
.slide-enter-active {
transform: translateX(0%);
transition: transform 1000ms ease-in-out;
}
.slide-exit {
transform: translateX(0%);
}
.slide-exit-active {
transform: translateX(-100%);
transition: transform 1000ms ease-in-out;
}
这是我的导航栏:
const SideNav = (props) => {
return (
<Wrapper>
{props.menuOpen ? (
<HamburgerSize onClick={props.refreshPage}>
<TransitionGroup>
<CSSTransition classNames="slide" timeout={{ enter: 300,exit: 300 }}>
<AllItems
onClick={() => {
props.setMenuOpen(!props.menuOpen);
}}
>
<ListItems to="/product-category/top"> TOPS </ListItems>
<Item to="/product-category/top/t-shirt"> T - Shirts </Item>
<Item to="product-category/top/shirts"> Shirts </Item>
<Item to="product-category/top/hoodies"> Hoodies </Item>
<Item to="product-category/top/coats"> Jackets & Coats </Item>
<ListItems to="/product-category/bottom"> BOTTOMS </ListItems>
<Item to="product-category/bottom/pants"> Pants </Item>
<Item to="product-category/bottom/shorts"> Shorts </Item>
<ListItems to="/product-category/bag"> BAGS & BACKPACKS </ListItems>
<ListItems to="/about-us"> ABOUT US </ListItems>
<ListItems to="/contact"> CONTACT </ListItems>
</AllItems>
</CSSTransition>
</TransitionGroup>
</HamburgerSize>
) : null}
</Wraper>
)
如何制作带有样式组件和react-transition-group的动画?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。