Использование анимации (постепенный рост числа) [Архив форума]

Просмотр полной версии : Использование анимации (постепенный рост числа)

Булат Азат улы

07.10.2017, 19:02

Здравствуйте. Делаю слайды, и в них передвигаю широоокий блок с помощью transform:translateX() по области блока, в котором он находится (т.е. остальные части скрыты с помощью свойства overflow: hidden).
Использую такую команду в яваскрипте:

$(выборка).css("transform", "translateX("+poz+"px)");
// poz - значение, числовой вид - конечное положение
// известно и первоначальное положение (например, pozFirst)

То есть, значение translateX = 0. При нажатии на "след.", или по истечении тайм-аута включается функция, в котором значение translateX вносится в переменную pozFirst.
И этой переменной добавляется ширина изображения (чтобы полностью перейти к другой), т.е.:
poz = pozFirst + imageWidth;
И пишется команда изменения стиля, которую написал выше.

Так вот, хотел бы сделать анимацию перехода. Пробовал так - не работает:

$(выборка).animate({transform: "translateX("+poz+"px)"},"slow");

С помощью анимации CSS (@keyframes) даже пробовать не стал - вообще не понятно, в .css() что куда вписывать. Да и примеров в интернете не нашел.
Помогите пожалуйста, как сделать подобную анимацию?

рони

07.10.2017, 19:17

хотел бы сделать анимацию перехода
https://javascript.ru/forum/misc/70820-blokirovka-s-tajjmautom-obratnym-otschjotom-knopki-posle-ejo-nazhatiya.html#post466557

рони

07.10.2017, 19:20

Булат Азат улы,
может
<style type="text/css"> выборка{
transition: 1s;
}

</style>

рони

07.10.2017, 19:30

Булат Азат улы,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
background-color: rgba(139, 69, 19, 1);

}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$.fn.Timer = function Timer(obj) {
var def = {
from: 5E3,
duration: 5E3,
to: 0,
callback: null,
step: function(now, fx) {
$(fx.elem).css("transform", "translateX("+(now | 0)+"px)");
}
};
var opt = $.extend({}, def, obj);
return this.each(function(indx, el) {
$(el).queue(function() {
el.n = opt.from;
$(el).dequeue()
});
$(el).animate({
n: opt.to
}, {
easing: "swing",
duration: opt.duration,
step: opt.step,
complete: opt.callback
})
})
};

$(".hot").Timer({from: 0,
duration: 5000,
to: 500})

});
</script>
</head>

<body>
<style type="text/css">

</style>
<div class="hot"></div>

</body>
</html>

Булат Азат улы

07.10.2017, 19:41

рони,
Спасибо огромное! Об этом даже не знал (думал, работает только на наведения мышью):
transition: 1s;
Всё очень красиво работает!!!