时间戳

首页 > 解决方案 > 使用关键帧动画中的道具的样式化组件

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

问题描述

在动画中使用道具的正确方法是什么：${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;

标签： javascriptcssreactjs

解决方案

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

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

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

推荐阅读