Question

在动画中使用道具的正确方法是：$ {styledKeyFrame} $ {props.myProps}？

问题：

import styled from 'styled-components';
const KeyFrameTest = styled.keyframes`
    from { opacity: 0; }
    to { opacity: 1; }
`;

const StyledComponent = styled.div`
 animation: ${KeyFrameTest} 2s 4s ease-in; /* works */
 animation: ${props => `${KeyFrameTest} 2s ${props.delay} ease-in`}; /* ERROR */
 animation: ${props => `${styled.css`{KeyFrameTest}}` 2s ${props.delay} ease-in`}; /* ERROR */
`;

const PureComponent = () => <StyledComponent delay="3s" />;
export default PureComponent;

Answer 1

我认为当您尝试在${props => }语法中使用KeyFrame时发生错误。

我不知道您使用的是哪个版本的样式组件，但我认为这应该可行；

animation: ${KeyFrameTest} 2s ${props => props.delay} ease-in

在关键帧动画中使用道具的样式化组件

1 个答案: