使用styled-components - React传递道具到关键帧

Question

我不能将'inicial‘和'final’作为道具传递给关键帧。你能帮帮我吗?

const sliderzada = keyframes`
 from {
  transform: translate(${0}px) //i need 'inicial' here
 }
 to {
  transform: translate(${-1250}px) //i need 'final' here
 }
`;

const animation = css`
animation: ${ sliderzada} 1.2s ease-in-out;
`;

const Sliderzin = styled.div`
${props => props.isClicked && animation}
`;

const Slider = () => {

const [isClicked, setIsClicked] = React.useState(false)
const [inicial, setInicial] = React.useState(0)
const [final, setFinal] = React.useState(-1250)

return (
    <div className={styles.wrapper}>
        <Sliderzin inicial={inicial} final={final} isClicked={isClicked}>
        </Sliderzin>
    </div>
)

}

我只需要在关键帧中使用'inicial‘和'final’。

Answer 1

您只需像这样添加props：

const sliderzada = (props) => keyframes`
  from {
    transform: translate(${props.inicial}px) //i need 'inicial' here
  }
  to {
    transform: translate(${props.final}px) //i need 'final' here
  }
`;


const animation = (props) => css`
  animation: ${sliderzada(props)} 1.2s ease-in-out;
`;

const Sliderzin = styled.div`
  ${props => props.isClicked && animation(props)}
`;