如何使用CSS过渡从右向左滑动动画

Question

我正在尝试为导航栏幻灯片从右到左制作动画

这是我的导航栏代码：

const SideNav = (props) => {
    return (
        <Wrapper>
            {props.menuOpen ? (
                <TransitionGroup>
                    <CSSTransition classNames="slide" timeout={{ enter: 300, exit: 300 }}>
                        <HamburgerSize onClick={props.refreshPage}>
                            <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>
                        </HamburgerSize>
                    </CSSTransition>
                </TransitionGroup>
            ) : null}

这是我的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;
}

这是我的github项目链接： https://github.com/nathannewyen/the-beuter