Question

我目前对样式化组件的“关键帧”存在问题。我已经开始了解如何在'styled.div'中使用道具，但我无法在'关键帧'组件中使用道具。

我知道下面的例子有点基础，但是它提到了我想要做的事情。这里的'关键帧'版本有什么问题：

const HomePageDiv = styled.div`
    background: ${(props) => `red`};
`;

const backgroundChange = keyframes`
    0%{
        background: ${(props) => `blue`};
    }
`;

此处'styled.div'组件将呈现红色背景，但如果我包含关键帧动画，则会完全忽略它。另一方面，如果我要包含以下关键帧动画：

const backgroundChange = keyframes`
    0%{
        background: blue;
    }
`;

我会从蓝色到红色完美淡化。这让我相信'keyframes'和'styled.div'组件对于道具使用有不同的语法。有人可以帮助我理解差异吗？

Answer 1

要访问关键帧中的道具，您需要将keyframe道具传递给您的组件。

工作示例：

const rotate = keyframes`
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(${props => props.rotation || '360deg'});
  }
`

const RotatingBox = styled.div`
  animation: ${rotate} 10s linear infinite;
`

// Usage:

<RotatingBox rotation="180deg" />

这个“问题”在故障单397

中突出显示

Answer 2

我终于找到了解决问题的方法。 Matthew Barbara的解决方案对我不起作用，我不知道为什么，但我确实在票397中找到了解决方案。

这是我将解决方案应用于我自己的代码的方式：

import styled, {keyframes} from 'styled-components';

const backgroundChange = (props) => keyframes`
    0%{
        background: ${props.color1};
    }
`;

const HomePageDiv = styled.div`
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    position: absolute;
    overflow: hidden;
    animation: ${backgroundChange} 2s linear forwards 1;
`;

export default HomePageDiv;

这会将道具正确地传递到关键帧中，使用这些道具需要使用$ {}的标准符号。这些道具必须通过您的组件传递，当然关键帧变量名称必须传递到您的动画中。

样式组件的'styled.div'和'keyframes'有什么区别？

2 个答案: