Остановка вращения javascript div

Это скрипт, который делает поворот div. Теперь я пытаюсь сделать только один поворот и остановить скрипт .. вы можете мне помочь? Как остановить этот скрипт только на один поворот? Я новичок в этом языке программирования .. D:Остановка вращения javascript div

<body style="-webkit-transform: rotate(0deg);"> 
    <div id="wrap"> 
     <p>some content</p> 
     <script type="text/JavaScript"> 
      function getTransformProperty(element) { 
       var properties = ['transform', 'msTransform', 'WebkitTransform', 'MozTransform' , 'OTransform']; 
       var p; 
       while (p = properties.shift()) { 
        if (typeof element.style[p] != 'undefined') { 
         return p; 
        } 
       } 
       return false; 
      } 
      var div = document.getElementById('wrap'); 
      var property = getTransformProperty(div); 
      if (property) { 
       var d = 0; 
       setInterval(function() {div.style[property] = 'rotate(' + (d++ % 360) + 'deg)';}, 10); 
      } 
     </script> 
    </div>

источник

2015-09-12 merdolo dafoca

Это довольно странный способ передвижения div. Вы считали, что вместо этого используете переход к классу или CSS-анимацию? –

@JonathanBrooks вы правы, может быть, это не лучший способ сделать анимацию, но чтобы исправить проблему и в отношении уровня знаний, достаточно, чтобы он понимал, как справляться с интервалами. И что вы можете их очистить, остановите их – webdeb

@ JonathanBrooks на самом деле не хочет начинать глубокую дискуссию, но я хочу поделиться этой ссылкой с вами, потому что вы говорите о хороших практиках и т. Д., Поэтому, пожалуйста, стоит прочитать https://css-tricks.com/myth-busting-css-animations-vs-javascript/ – webdeb

Конечно, вы можете это сделать, очистив interval.

if (property) { 
    var d = 0; 
    interval = setInterval(function() { 
     d++; 
     div.style[property] = 'rotate(' + (d % 360) + 'deg)'; 
     if (d == 360) clearInterval(interval); // clearInterval if 360deg reached.. 
    }, 10); 
}

источник

2015-09-12 21:35:46 webdeb

О, да, вы правы, это потому, что d ++ возвращает сначала последнее значение, а затем увеличивает. Я отредактирую код , – webdeb

Ваш подход не идеален. Лучше всего было бы использовать переход класса CSS, так как:

//setTimeout is merely for delaying the effect for display purposes 
 
setTimeout(function(){ 
 
    document.getElementById("wrap").classList.add("rotate"); 
 
}, 1000);

#wrap { 
 
    -webkit-transition: -webkit-transform 1s; 
 
      transition: transform 1s; 
 
} 
 

 
#wrap.rotate { 
 
    -webkit-transform: rotate(360deg); 
 
     -ms-transform: rotate(360deg); 
 
      transform: rotate(360deg); 
 
}

<div id="wrap"> 
 
<p>some content</p> 
 
</div>

Гораздо меньше кода!

источник

2015-09-12 21:36:32

Можете ли вы объяснить, почему это должен быть правильный ответ? – webdeb

Я действительно не понимаю, почему люди думают, что использование css-переходов действительно хорошо. Я бы сказал, что достаточно создать слайдер, но это определенно не идеально, когда дело доходит до производительности. Это может показаться смешным, потому что все знают, что css работает от gpu, но они забывают, что gpu вычисляет реквизит, а медленный процесс рендеринга, однако, выполняется механизмом компоновки. Вот почему игра HTML5 не использует css анимации .. потому что они отстой фактически .. – webdeb

Это неправильный вывод. Вы не изменяете css с помощью js, вы изменяете свойства элемента html. CSS и стиль элемента - это разные вещи .. И, на мой взгляд, код лучше читается, когда он находится в одном месте .. И не в три. Как дать ему класс с js и поиск 25 css-файлов .. для этот класс ... Но я согласен с тем, что хороший код читабельный и поддерживаемый. Кто будет поддерживать ваши 25 файлов css? Вы будете, всю свою жизнь;) – webdeb

Остановка вращения javascript div

ответ

Смежные вопросы