Как повернуть элемент из текущей позиции вращения в новую позицию - PullRequest
Новая
       13

Как повернуть элемент из текущей позиции вращения в новую позицию

0 голосов
/ 08 апреля 2019

У меня есть элемент SVG, к которому я применяю бесконечное вращение CSS.Я хочу действие, которое будет вращать этот элемент в определенной степени от его текущей степени вращения в бесконечном вращении.

Я успешно заставил элемент вращаться бесконечно и вращаться до желаемой степени, но это не плавный переход.Когда применяется новое вращение (rotateBack), элемент сбрасывается на начало 0 градусов, а затем поворачивается на 50 градусов.Как я могу запустить анимацию rotateBack с текущей степенью вращения?

Вот мое текущее решение, исключая некоторые стили для длины.

function refresh() {
  var refreshIcon = document.getElementById('refreshIcon');
  var refreshIconPath = document.getElementById('refreshIconPath');
  if (refreshIconPath.style.fill === 'rgb(186, 12, 47)') {
    refreshIconPath.style.fill = 'green';
    refreshIcon.style.webkitAnimation = 'rotateBack 1.5s forwards';
  } else {
    refreshIconPath.style.fill = 'rgb(186, 12, 47)';
    refreshIcon.style.webkitAnimation = 'rotation 1.5s infinite linear forwards';
  }
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-webkit-keyframes rotateBack {
  100% {
    -webkit-transform: rotate(50deg);
  }
}
<button class="refresh-button" onclick="refresh();">
    <svg class="refresh-icon" id="refreshIcon" width="36pt" height="36pt" viewBox="0 0 36 36" version="1.1">
        <g id="surface1">
            <path class="refresh-icon-path" id="refreshIconPath" style=" stroke:none;fill:rgb(186, 12, 47);fill-rule:nonzero;fill-opacity:1;" d="M 4.097656 19.261719 C 3.875 17.355469 4.058594 15.515625 4.558594 13.816406 C 6.214844 8.164062 11.410156 4.011719
            17.574219 3.9375 L 17.574219 0.242188 C 17.574219 0.0390625 17.828125 -0.0703125 17.996094 0.0507812 L 25.597656 5.636719 C 25.722656 5.730469 25.722656 5.921875 25.597656 6.011719 L 18.003906 11.59375
            C 17.828125 11.71875 17.582031 11.609375 17.582031 11.40625 L 17.582031 7.71875 C 13.527344 7.785156 10.070312 10.28125 8.582031 13.816406 C 8.015625 15.148438 7.730469 16.621094 7.8125 18.167969 C 7.921875
            20.292969 8.71875 22.25 9.980469 23.832031 C 10.65625 24.675781 10.492188 25.90625 9.621094 26.546875 C 8.792969 27.152344 7.636719 26.984375 6.996094 26.179688 C 5.4375 24.230469 4.394531 21.855469 4.097656
            19.261719 Z M 26.039062 12.167969 C 27.304688 13.742188 28.105469 15.707031 28.207031 17.832031 C 28.285156 19.386719 27.992188 20.859375 27.4375 22.183594 C 25.949219 25.71875 22.492188 28.222656 18.4375
            28.28125 L 18.4375 24.59375 C 18.4375 24.390625 18.179688 24.28125 18.011719 24.40625 L 10.414062 29.988281 C 10.289062 30.085938 10.289062 30.273438 10.414062 30.363281 L 18.003906 35.949219 C 18.179688
            36.070312 18.429688 35.960938 18.429688 35.757812 L 18.429688 32.0625 C 24.59375 31.996094 29.796875 27.84375 31.445312 22.183594 C 31.945312 20.484375 32.121094 18.644531 31.90625 16.738281 C 31.613281 14.144531
            30.574219 11.769531 29.011719 9.820312 C 28.367188 9.015625 27.21875 8.847656 26.390625 9.453125 C 25.523438 10.09375 25.363281 11.324219 26.039062 12.167969 Z M 26.039062 12.167969 "></path>
        </g>
    </svg>
</button>
...