Задержка обновления отображаемого элемента

Question

У меня возникла проблема при попытке обновить узел DOM немного после перехода на элемент, который вращается на 360 градусов на 2D-плоскости.У меня есть прямоугольный элемент SVG, который отображает месяц (например, «Декабрь») и кнопку, которая вычитает 360 градусов, чтобы этот вид вращался против часовой стрелки.Когда он вращается, он меняет месяц на следующий месяц года / следующего года:

(например, «Dec» -> «Jan»).

Поведение, которое я пытаюсь получитьэто когда он сначала начинает вращаться, все еще показывая исходный месяц, затем, когда он выходит за пределы SVG viewBox, месяц меняется на следующий, поэтому пользователь не может видеть, как меняется текст.Вместо этого происходит следующее:

1. Текст изменяется сначала на следующий месяц, где пользователь может видеть
2. Элемент начинает вращаться против часовой стрелки
3. Анимация останавливается иновый месяц отображается до тех пор, пока кнопка не будет нажата снова

Я не думаю, что это имеет какое-либо отношение к анимации. Мне просто нужно, чтобы этот текст немного обновился после начала этого перехода.Переход составляет 300 мс, поэтому, вероятно, я ищу задержку в 50 мс.

Вот так я передаю данные и метод месяца для обновления этих данных.

function MonthView(date = new Date()) {
  let monthVal = date.getMonth()
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
  this.displayedMonth = months[monthVal]
  this.updateMonth = () => {
    monthVal += 1
    if (monthVal > 11) monthVal=0
    this.displayedMonth = months[monthVal]
  }
}

const Calendar = props => {
  return (
    <div className="calendar" style={{width: props.width+"px"}}>
      <CalendarUI view={new MonthView()} colors={props.colors.background} />
    </div>
  )
}

Я пыталсяделать это с setTimeout(), но это нарушает мою программу

const CalendarUI = props => {
  const [rotateVal, setRotateVal] = useState(0)
  let monthText = props.view.displayedMonth
  // This is a react hook that updates the next month to display on componentDidMount & componentDidUpdate
  useEffect(
    () => {props.view.updateMonth()}
  )
  console.log(props.view)
  return (
    <div>
      <div style={{width: "100%"}}>
        <svg viewBox="0 0 200 70" xmlns="http://www.w3.org/2000/svg">

          // path that makes the rectangular shape that displays the month
          <path d="M 100, 30 h 50, 0 c 0, 10, 0, 25, -25, 25 h -50, 0 c -10, 0, -25, 0, -25, -25 h 50, 0 z" 
          style={{fill: "white"}}/>

          <g className="month-year-group" style={{transform: "translate(-10px) rotate("+rotateVal+"deg)"}}>
            <rect x="50" y="30" style={{fill: "none", width: "120", height: "120"}} />
            // Below is the element I'm trying delay the update on the text
            {setTimeout(() => { return <text id="month-year-1" className="month-year" x="75" y="50" >{monthText} 2018</text>}, 100)}
          </g>

          // path that hides text when spinning (where I want the text to change)
          <path d="M 150, 30 h 50, 0 v 0, 40 h -200, 0 v -40, 0 h 50, 0 c 0, 10, 0, 25, 25, 25 h 50, 0 c 10, 0, 25, 0, 25, -25 z"
          style={{fill: props.colors}}/>

          // This is the button that triggers the transition
          <g onClick={() => { setRotateVal(rotateVal-360) }}>
            <rect x="150" y="40" style={{fill: "blue", width: "50", height: "30", rx: "15"}}/>
            <path d="M 15, 52.5 h 30, 0 v 0, 5 h -30, 0 l 5, 8 h -6, 0 l -8, -10 l 8, -10 h 6, 0 z" 
            style={{fill: "white", stroke: "none", transform: "translate(200px, 0px) rotateY(180deg)"}}/>
          </g>
        </svg>
      </div>
    </div>
  )
}