Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.07.2017, 22:03
Профессор
Отправить личное сообщение для Teamur Посмотреть профиль Найти все сообщения от Teamur
 
Регистрация: 08.06.2015
Сообщений: 206

WebAnimation. Как переместить блок в конечное положение?
Блок перемещается, а затем происходит сброс анимации, чего мне не нужно.
<!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() не помогает.

Последний раз редактировалось Teamur, 16.07.2017 в 07:30.
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2017, 22:50
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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>


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

Последний раз редактировалось j0hnik, 15.07.2017 в 22:54.
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2017, 23:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

j0hnik,
Сообщение от Teamur
WebAnimation
!!! а не jquery
Руководство по Web Animations API
Ответить с цитированием
  #4 (permalink)  
Старый 15.07.2017, 23:22
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от рони Посмотреть сообщение
j0hnik,
!!! а не jquery
Руководство по Web Animations API
Тогда не знаю, не использовал такое =(
Ответить с цитированием
  #5 (permalink)  
Старый 15.07.2017, 23:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

как-то так ...
<!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>

Последний раз редактировалось рони, 15.07.2017 в 23:53.
Ответить с цитированием
  #6 (permalink)  
Старый 16.07.2017, 07:44
Профессор
Отправить личное сообщение для Teamur Посмотреть профиль Найти все сообщения от Teamur
 
Регистрация: 08.06.2015
Сообщений: 206

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

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

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

Последний раз редактировалось Teamur, 16.07.2017 в 08:56.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать плавающий блок, который... Greatest_Duke jQuery 8 03.12.2017 02:26
Как заменить блок div? LesoRub AJAX и COMET 0 15.07.2017 19:05
Как подгружать файлы в блок <div id='content'? mikefromru AJAX и COMET 2 02.03.2017 22:22
Переместить блок к "предродителю". PrideCat Events/DOM/Window 1 28.12.2014 16:21
Как сделать сквозной блок? art1989 Элементы интерфейса 8 18.09.2014 22:51