Question

您好，我正在尝试制作带有情感js打字稿和redux的动画由于某种原因，我的动画无法正常工作，我不知道问题是否出在我的类型中，因为我的状态与图片一样正常：

代码：

TSX ：

'#then tar the model directory with params,shape and symbol'

sagemaker_model = MXNetModel(model_data = 's3://' + sagemaker_session.default_bucket() + '/model/model.tar.gz',
                                  role = role,framework_version='1.6.0',py_version='py3',entry_point='dummy.py')

predictor = sagemaker_model.deploy(initial_instance_count=1,
                                          instance_type='ml.m4.xlarge')

样式：

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>
  );
};

和我的切片：

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)'};
    }
  }
`;

基本上我的动画无法正常工作，我知道问题出在我的样式代码上像这样的gif：

这是我的示例：

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

我知道问题与我的道具有关

情感Js汉堡动画

0 个答案: