带道具的样式化组件动画

Question

这是我要实现的目标：

const fallOff = keyframes`
   0% {
    transform: translateY(0px);
    opacity: 1;
   }
   80% {
    opacity: 0;
   }
   100% {
    transform: translateY(120vh);
    opacity: 0;
   }
`;

export const Tiles = styled.div<{
  size: number;
  delay: number;
  fallOff: boolean;
}>`
  width: ${({ size }) => size - 4}px;
  height: ${({ size }) => size - 4}px;
  border: 1px #343434 solid;
  background-color: #191919;

  animation: ${(props) =>
    props.fallOff ? `${fallOff} 1.5s ease-in forward` : null};
  animation-delay: ${({ delay }) => (delay === 1 ? 0 : `${delay + 0.5}s`)};
`;

我有多个图块，它们的 fallOff 动画将由值 fo fallOff 触发。他们每个人都会相应地根据他们的每个 delay 值获得 animation-delay。当我运行这个时，我得到 Uncaught Error: It seems you are interpolating a keyframe declaration (jGNlbV) into an untagged string.

Answer 1

试试吧。这将是工作。把动画名字的选择单独拿出来属性.

    const Tiles = styled.div<{
      size: number;
      delay: number;
      fallOff: boolean;
    }>`
      width: ${({ size }) => size - 4}px;
      height: ${({ size }) => size - 4}px;
      border: 1px #343434 solid;
      background-color: #191919;
    
      animation: 1.5s ease-in forward;
      animation-name: ${(props) => props.fallOff ? fallOff : null};
      animation-delay: ${({ delay }) => (delay === 1 ? 0 : `${delay + 0.5}s`)};
    `;

带道具的样式化组件动画

Styled component animation with props

javascript

css

reactjs

styled-components