Есть ли способ заставить элемент вращаться без переменной, указывающей, как далеко он уже повернулся? - PullRequest
Новая
       133

Есть ли способ заставить элемент вращаться без переменной, указывающей, как далеко он уже повернулся?

0 голосов
/ 30 мая 2020

У меня есть экспериментальный веб-сайт, на котором воспроизводится музыка c, и я хочу, чтобы кнопки вперед и назад вращались при нажатии на них. Но я также не хочу, чтобы две переменные указывали, насколько далеко они повернули, или функцию, чтобы узнать, как далеко они повернулись от свойства преобразования CSS. У них есть переход для эффектов наведения. Я пробовал 

    backward.classList.add("notrans");
    backward.style.transform = "rotateZ(0deg)";
    backward.classList.remove("notrans");
    backward.style.transform = "rotateZ(-360deg)";

и некоторые тесно связанные вещи, а также имел setTimeout, чтобы потом сбросить его, что слишком долго для публикации.

1 Ответ

0 голосов
/ 30 мая 2020

Animate - это то, что вы ищете. Это должен быть рабочий пример: (Проверено в FF и Chrome) 

/* THIS IS A JAVASCRIPT CLASS THAT ADDS AND
REMOVES THE CSS CLASS FROM YOUR ELEMENT
USING THE ELEMENT'S ID VALUE TO REFERENCE. */

function startStop(strstp) {
  var infinite = document.getElementById("imSpinning");
  var once = document.getElementById("imSpinningOnce");
  
  if(strstp == 1)
  {
    infinite.classList.add("spin");
    once.classList.add("spinOnce");
    timer = setTimeout(function() {
      once.classList.remove("spinOnce");
    },1000); 
  }
  else
  {
    infinite.classList.remove("spin");
    once.classList.remove("spinOnce");
  }
}
/* THIS IS THE CSS CLASS THAT CREATES INFINITE ROTATION */

.spin {
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



/* THIS IS THE CSS CLASS THAT ROTATES ONCE */

.spinOnce {
    -webkit-animation:spin 1s linear;
    -moz-animation:spin 1s linear;
    animation:spin 1s linear;
}
@-moz-keyframes spinOnce { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spinOnce { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spinOnce { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<div style="width: 100px; height: 30px; background-color: green; color: white; margin: 20px; text-align: center; cursor: pointer;" onclick="startStop(1)">
GO
</div>

<div style="width: 100px; height: 30px; background-color: red; color: white; margin: 20px; text-align: center; cursor: pointer;" onclick="startStop(0)">
STOP
</div>

<!-- ELEMENT TO ROTATE INFINITLY WITH "spin" CLASS -->
<div id="imSpinning" class="spin" style="position: absolute; top: 10px; right: 30px; height: 140px; width: 140px; background-image: url(https://icons.iconarchive.com/icons/thehoth/seo/256/seo-web-code-icon.png); background-size: 100% 100%; background-position: center center; border-radius: 50%; overflow: hidden;"></div>


<!-- ELEMENT TO ROTATE ONCE WITH "spin" CLASS -->
<div id="imSpinningOnce" class="spinOnce" style="position: absolute; top: 10px; right: 200px; height: 140px; width: 140px; background-image: url(https://icons.iconarchive.com/icons/thehoth/seo/256/seo-web-code-icon.png); background-size: 100% 100%; background-position: center center; border-radius: 50%; overflow: hidden;"></div>

Просто скопируйте приведенный выше класс CSS в раздел / таблицу стилей своей страницы и при необходимости измените его. Убедитесь, что вы ссылаетесь на класс в своем элементе html.

Также я редактировал в небольшом классе JavaScript, который добавляет / удаляет spin класс из DIV элемент, если он помогает вам запускать и останавливать анимацию.

Надеюсь, это поможет и удачи!

...