Question

当在2D平面上旋转360度的元素上进行过渡后，尝试更新DOM节点时遇到问题。我有一个矩形SVG元素，显示一个月（例如“ Dec”）和一个按钮，该按钮减去360度即可使该视图逆时针旋转。旋转时，会将月份更改为年份/下一年的下个月：

（例如“ Dec”->“ Jan”）。

我要尝试的行为是，当它第一次开始旋转时仍显示原始月份，然后当它超出SVG viewBox时，该月份更改为下一个，因此用户实际上看不到文本更改。相反，发生的是：

文本首先更改为用户可以看到的下个月
该元素开始逆时针旋转
动画停止并显示新的月份，直到再次按下按钮

我认为这与动画没有任何关系，我只需要在过渡开始后稍微更新一下文本即可。过渡时间为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>
  )
}

延迟对渲染元素的更新

0 个答案: