动画样式 CSS 到 ReactJS 样式变量

Question

I need this CSS line:

.anim-typewriter{
     animation: typewriter 2.5s steps(25) 1s 1 normal both,
                blinkTextCursor 650ms steps(25) infinite normal;
}

To make it into a ReactJS variable style as I need to change the steps and seconds dynamically depending on the size of the text prop.

Answer 1

const getAnimationStyle = (duration, steps, blinkCursorDuration) => {
  // returns the css style as a js object
  return {
    animation: `typewriter ${duration}s steps(${steps}) 1s 1 normal both`,
   'blinkTextCursor' : `${blinkCursorDuration}ms steps(${steps}) infinite normal`
  };
}

// set style in element
<div style={getAnimationStyle()}></div>