Форум

Teamur · #1 (**permalink**) 15.07.2017, 22:03

Блок перемещается, а затем происходит сброс анимации, чего мне не нужно.

<!doctype html>

<style>
 div{
  position:absolute;
  left:-100px;
  width:100px;
  height:50px;
  background:#ccc
 }
</style>

<div id='div'></div>

<script>
 div.animate(
  [{left:0}],
  {duration:500}
 )
</script>

Метод .pause() не помогает.

j0hnik · #2 (**permalink**) 15.07.2017, 22:50

<html>
<head></head>
<style>
 div{
  position:absolute;
  left:-100px;
  width:100px;
  height:50px;
  background:#ccc
 }
</style>
</head>
<body>
<div id='div'>565656</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 $('#div').animate({
  left:0
},500);
</script>
</body>
</html>

вы когда макет делать научитесь??? У Рони уже сил нет всем одно и то же писать.

рони · #3 (**permalink**) 15.07.2017, 23:00

j0hnik,

Сообщение от Teamur

WebAnimation

!!! а не jquery
Руководство по Web Animations API

j0hnik · #4 (**permalink**) 15.07.2017, 23:22

Сообщение от рони

j0hnik,
!!! а не jquery
Руководство по Web Animations API

Тогда не знаю, не использовал такое =(

рони · #5 (**permalink**) 15.07.2017, 23:47

как-то так ...

<!doctype html>

<style>
 div{
  position:absolute;
  left:-100px;
  width:100px;
  height:50px;
  background:#ccc
 }
</style>

<div  class="js"></div>
<div  class="js" style="top: 120px;"></div>
<script>
var elements = document.querySelectorAll('.js');

for (var i = 0, len = elements.length; i < len; ++i) {
    var animation = elements[i].animate([{
        left: '-100px'
    }, {left: '0' }
    ], { fill: 'forwards' ,
        duration: 3000,
        iterations: 1,
        direction: 'normal',
        easing: 'linear',
        delay: 0
    });
}
</script>

Teamur · #6 (**permalink**) 16.07.2017, 07:44

j0hnik, спасибо.
html был "сокращен", торопился. Конечно верстать нужно по правилам, чтобы читатели тем могли понять что происходит, но в стандартах допускается опускать некоторые теги. Извиняюсь.

рони,
благодарю за помощь! Все работает!

fill: 'forwards' - то что нужно!

Форум

Справочник

Discord чат

Курсы javascript