[英]How can I use animation in styled-components css``?
I read documents, and I used keyframes`` for declare css animation. But I got error message like this:我阅读了文档,并使用关键帧来声明 css animation。但我收到如下错误消息:
Please wrap your string in the css`` helper which ensures the styles are injected correctly.请将您的字符串包装在 css`` 帮助程序中,以确保正确注入 styles。
So, I wrapped animation with css`` instead keyframes``, but animation didn't work.所以,我用 css`` 而不是关键帧`` 包裹了 882370999542088,但是 animation 没有用。
const rippleAnimation = css`
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(var(--material-scale));
opacity: 0;
}
`;
This didn't work well.这并不奏效。
I don't know I wrote perfectly...我不知道我写的完美...
ordinary code(error about keyframes):普通代码(关键帧错误):
const rippleAnimation = keyframes`
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(var(--material-scale));
opacity: 0;
}
`;
You can do it like this.你可以这样做。 Create keyframes in CSS. And add the keyframes with js.
在CSS创建关键帧,用js添加关键帧。 You can also add this keyframe after clicking in js.
也可以在js中点击后加上这个关键帧。
const hello = document.querySelector(".hello") hello.style.animation = "5s colorChange linear infinite"
.hello { color: #000000; } @keyframes colorChange { 0% { color: black; } 50% { color: red; } 100% { color: black; } }
<h1 class="hello">Hello World</h1>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.