css - 内联动画样式在 Reactjs 中不起作用
问题描述
我已经使用带有动画的 css 实现了计时器,它按预期工作。由于动画持续时间是动态的,我需要将 css 作为内联样式注入。但是当我在 react 中将其转换为 JSX 内联样式时,动画无法像以前那样工作。
<div className="wrapper">
<div className="pie spinner" style={{
animationDuration: `${sessionTimeout}s`,
animationTimingFunction: "linear",
animationDelay: `0s`,
animationIterationCount: "infinite",
animationDirection: "normal",
animationFillMode: "none",
animationPlayState: "running",
animationName: "timer__rotate"
}}></div>
<div className="pie filler" style={{
animationDuration: `${sessionTimeout}s`,
animationTimingFunction: `steps(1)`,
animationDelay: `0s`,
animationIterationCount: "infinite",
animationDirection: "reverse",
animationFillMode: "none",
animationPlayState: "running",
animationName: "timer__opacity"}}></div>
<div className="mask" style={{
animationDuration: `${sessionTimeout}s`,
animationTimingFunction: `steps(1)`,
animationDelay: `0s`,
animationIterationCount: "infinite",
animationDirection: "normal",
animationFillMode: "none",
animationPlayState: "running",
animationName: "timer__opacity"
}}></div>
<div className="timer">
<div className="remaining_time">
{sessionTimeout}
</div>
<div className="time">
Seconds
</div>
</div>
</div>
CSS
.wrapper {
position: relative;
margin: 40px auto;
background: #fff;
}
.wrapper, .wrapper * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
width: 125px;
height: 125px;
}
.timer{
position: absolute;
top: 25%;
left: 25%;
z-index: 4;
text-align: center;
}
.timer .remaining_time{
font-size: 1.8rem;
font-weight: bold;
}
.timer .time{
font-family: Roboto;
line-height: 14px;
text-align: center;
font-size: 17px;
margin-bottom: 0px;
color: #000;
}
.wrapper .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: #f3f3f3;
border: 5px solid rgba(2, 155, 237, 1);
}
.wrapper .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 2;
border-right: none;
/* animation: timer__rotate 60s linear infinite; */
}
.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
animation-play-state: running;
}
.wrapper .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 1;
/* animation: timer__opacity 60s steps(1, end) infinite reverse; */
border-left: none;
}
.wrapper .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 3;
/* animation: timer__opacity 60s steps(1, end) infinite; */
}
@keyframes timer__rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes timer__opacity {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
解决方案
推荐阅读
- flutter - Dart 将两个 Uint8 转换为小端的 Uint16
- javascript - Phaser 指针事件在 WebView (Xamarin Forms) C# 中不起作用
- python - 如何在 Redis 订阅方法中集成异步处理程序?
- twitter-bootstrap - Vue Bootstrap:在 b-col 组件底部对齐按钮
- python - 如何在python中定义一个全零元素的矩阵?
- javascript - Node.js / Socket.io 聊天应用程序运行良好......直到真实流量导致 TypeError?
- typescript - react-bootstrap align-middle 不适用于列
- embedded - 多路复用器不模拟更改
- c++ - 有没有办法访问结构的第 n 个元素?
- r - 错误:无法分配大小为 20.0 Gb 的向量