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() не помогает. |
<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>
вы когда макет делать научитесь??? У Рони уже сил нет всем одно и то же писать. |
|
Цитата:
|
:write: как-то так ...
<!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>
|
j0hnik, спасибо.
html был "сокращен", торопился. Конечно верстать нужно по правилам, чтобы читатели тем могли понять что происходит, но в стандартах допускается опускать некоторые теги. Извиняюсь. рони, благодарю за помощь! Все работает! fill: 'forwards' - то что нужно! |
| Часовой пояс GMT +3, время: 04:19. |