动画未动态分配给样式组件 [英] Animation is not being dynamically assigned to a styled-component

问题描述

我无法将 CSS 动画动态分配给样式化组件.我在下面复制了它.

我最初试图将 CSS 动画定义为，

<预><代码>...从'styled-components'导入样式，{关键帧}...导出默认函数 App() {....}const slideAnimation = 关键帧`0% {变换:translateX(0px);}100% {translateX(-400px);}`;

但是这个

解决方案

来自文档 https://styled-components.com/docs/api#keyframes

用keyframe创建动画并用css

放入css

https://codesandbox.io/s/intelligent-khorana-5usys

I'm unable to assign a CSS animation to a styled component dynamically. I've reproduced it below.

I initially was trying to define the CSS animation as,

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

export default function App() {
    . . . .
}


const slideAnimation = keyframes`
    0% {
        transform: translateX(0px);
    }
    100% {
        translateX(-400px);
    }
`;

But this threw an error, which is why I am now wrapping the animation with the css helper.

Not sure what I'm doing wrong, is assigning animations impossible this way with styled-components?

解决方案

From the doc https://styled-components.com/docs/api#keyframes

Create animation with keyframe and put into a css with css

https://codesandbox.io/s/intelligent-khorana-5usys

这篇关于动画未动态分配给样式组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！