如何使用导航栏的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 (将#修改为@）

react-transition-group reactjs reactjs reactjs reactjs