Inline Animation style are not working in Reactjs

Question

I have implemented the timer using css with animation, its working as expected. Since the animation duration is dynamic i need to inject the css as inline styles.but when i convert it into JSX inline styles in react, animation is not working as it was working before.

<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;
    }
  }

Answer 1

The issue with the code is that you are recalculating the animation duration on each state change. So on each state change the duration will be different. Set the animation duration only once, on component mount.

Try the below codesandbox code.

Answer 2

我认为您只需要在 css 文件中定义动画样式只比内联样式更好，因为它是带有 reac 的杂乱代码，还使用速记动画属性使您的代码更清晰。