Можно ли получить плавный переход CSS через 0 градусов с помощью transform: rotate (Xdeg)? - PullRequest
Новая
       14

Можно ли получить плавный переход CSS через 0 градусов с помощью transform: rotate (Xdeg)?

0 голосов
/ 19 июня 2019

У меня есть приложение React со значком на карте Leaflet и значением от 0 до 359, указывающим его текущее направление.

Я хочу transform: rotate(Xdeg) значок и использовать transition, чтобы оживить это вращение.

Моя проблема в том, что когда значение переходит 0 (или 360), переход происходит в противоположном направлении.

Можно ли изменить поле с transform: rotate(340deg) на transform: rotate(10deg) и повернуть его по часовой стрелке?

Пример CodePen здесь 

const App = () => {
  const [rotation, setRotation] = React.useState(340);

  return (
    <div id="wrapper">
      <div>
        <div className="box-wrapper">
          {/* Here is where I'm setting the rotation CSS transform dynamically */}
          <div className="box" style={{ transform: `rotate(${rotation}deg)` }}>
            <span>{ `Rotation: ${rotation}deg` }</span>
          </div>
        </div>
      </div>

      <div>
        <button onClick={() => setRotation((rotation + 10) % 360)}>+10 deg</button>
        <button onClick={() => setRotation(((360 + (rotation - 10)) % 360))}>-10 deg</button>
        <button onClick={() => setRotation(340)}>340 deg</button>
        <button onClick={() => setRotation(20)}>20 deg</button>
      </div>
    </div>
  )
}

1 Ответ

2 голосов
/ 19 июня 2019

Эффект «вращения» отображается, потому что вы используете оператор вычисления по модулю.Каждый раз, когда вы достигаете границы 0 или 359, это переворачивается.Если вы удалите оператор modulo в своих вычислениях и используете его вместо этого только для отображения значения степени, тогда он должен работать просто отлично.

Я создал модифицированную версию вашей ссылки CodePen . 

const App = () => {
  const [rotation, setRotation] = React.useState(340);
  function setRotation1(val) {
    let angle = rotation % 360;
    let diff = (360 - (angle - val))%360;

    if(diff > 180) {
      diff = (360-diff);
      setRotation(rotation - diff);
    } else {
      setRotation(rotation + diff);
    }
  }

  return (
    <div id="wrapper">
      <div id="demo">
        <div className="box-wrapper">
          {/* Here is where I'm setting the rotation CSS transform dynamically */}
          <div className="box" style={{ transform: `rotate(${rotation}deg)` }}>
            <span>{ `Rotation: ${(360+(rotation%360))%360}deg` }</span>
          </div>
        </div>
      </div>

      <div>
        <button onClick={() => setRotation(rotation + 10)}>+10 deg</button>
        <button onClick={() => setRotation(rotation - 10)}>-10 deg</button>
        <button onClick={() => setRotation1(340)}>340 deg</button>
        <button onClick={() => setRotation1(20)}>20 deg</button>
      </div>
    </div>
  )
}

Редактировать: Я обновил код на основе разговора в комментариях.

...