Emotion Js Hamburger animation

问题

Hello I'm trying to make an animation with emotion js typescript and redux for some reason my animation is not working I don't know if the problem is in my type because my state works normally as in the image:

Code:

TSX:

interface RootState {
  sideBarStatus: boolean;
}

interface SideBar {
  isOpen: boolean;
}

const LogoNavigation: React.FC<SideBar> = ({ isOpen }) => {
  const dispatch = useDispatch();
  console.log(isOpen);
  return (
    <LogoSide>
      <img src={Logo} alt="Logo Elo Ghost" />
      <Hamburguer open={isOpen} onClick={() => dispatch(toggleSide(!isOpen))}>
        <div />
        <div />
        <div />
      </Hamburguer>
    </LogoSide>
  );
};

const SideNavigation: React.FC = () => {
  // const { sideIsOpen } = useSelector((RootState) => RootState.toggleSide);
  const selectIsOpen = (state: RootState) => state.sideBarStatus;
  const sideBarStatus = useSelector(selectIsOpen);
  return (
    <SideNav>
      <LogoNavigation isOpen={sideBarStatus} />
    </SideNav>
  );
};

Styles:

export const LogoSide = styled('div')`
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #fdca40;
  img {
    height: 50px;
  }
`;

export const Hamburguer = styled.button<HamburguerProps>`
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 100;
  transition: all 0.2s ease;
  &:focus {
    outline: none;
  }
  div {
    width: 1.6rem;
    height: 0.25rem;

    background: ${(props: HamburguerProps) => (props.open ? 'red' : 'pink')};
    border-radius: 10px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;

    :nth-of-type(1) {
      transform: ${(props: HamburguerProps) =>
        props.open ? 'rotate(45deg)' : 'rotate(0)'};
    }

    :nth-of-type(2) {
      opacity: ${(props: HamburguerProps) => (props.open ? '0' : '1')};
      transform: ${(props: HamburguerProps) =>
        props.open ? 'translateX(20px)' : 'translateX(0)'};
    }

    :nth-of-type(3) {
      transform: ${(props: HamburguerProps) =>
        props.open ? 'rotate(-45deg)' : 'rotate(0)'};
    }
  }
`;

and my Slice:

import { createSlice } from '@reduxjs/toolkit';

const INITIAL_STATE = {
  sideIsOpen: false,
};

const sideBar = createSlice({
  name: 'toggleSide',
  initialState: INITIAL_STATE,
  reducers: {
    toggleSide: (state, action) => {
      state.sideIsOpen = !state.sideIsOpen;
    },
  },
});

export const { toggleSide } = sideBar.actions;
export { sideBar };

basically my animation is not working I know the problem is with my style code like this gif:

this my example:

https://codesandbox.io/s/great-galileo-zp3e7?file=/src/

i know the problem is related to my props

来源：https://stackoverflow.com/questions/61427095/emotion-js-hamburger-animation

标签

reactjs

typescript

emotion