Как сделать функцию JQuery animate без JQuery? С CSS свойствами всё понятно: их можно через transition и animation нарисовать, но как мне плавно изменить HTML?
Как мне плавно в течении 3-ёх секунд изменить значение прогресс бара и цифру возле него? Т.е. как плавно изменить ширину и значение возле бара с 10% до 80% за 3 секунды?
.progress {
display: inline-block;
width: 200px;
height: 12px;
border: 1px solid black;
border-radius: 6px;
overflow: hidden;
}
.progress_bar {
display: inline-block;
width: 10%;
height: 14px;
background-color: #3f51b5;
}
.progress_val {
display: inline-block;
}
Ответ
В JS есть специальная функция requestAnimFrame, которая позволяет создать анимационные эффекты.
// Указываем начальное время анимации
var start = performance.now();
requestAnimationFrame(function animate(time) {
// Высчитываем процент завершённости: высчитываем сколько прошло времени и делим на нужную продолжительность
var timeFraction = (time - start) / 3000;
if (timeFraction > 1) timeFraction = 1;
// Получаем элементы
var Bar = document.querySelector('.progress_bar'),
Val = document.querySelector('.progress_val');
// Указываем начальное значение
var oldVal = 10,
// Указываем новое значение
newVal = 80;
// Применяем
Bar.style.width = (oldVal + ((newVal - oldVal) * timeFraction)) + '%';
Val.innerHTML = (oldVal + ((newVal - oldVal) * timeFraction)) + '%';
// Если анимация незаконченна, запускаем новый шаг
if (timeFraction < 1) {
requestAnimationFrame(animate);
};
});
.progress {
display: inline-block;
width: 200px;
height: 12px;
border: 1px solid black;
border-radius: 6px;
overflow: hidden;
}
.progress_bar {
display: inline-block;
width: 10%;
height: 14px;
background-color: #3f51b5;
}
.progress_val {
display: inline-block;
}
Подробнее про создание анимаций с помощью этой функции: https://learn.javascript.ru/js-animation
Так же следует использовать полифиллы, т.к. эта функция начинает работать только в IE10. Полифилл:
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })();
Или же можно воспользоваться готовым плагином. К вашему вопросу подойдёт и самый простой плагин. К примеру, можно использовать мой: https://github.com/yuri-spivak/animations-in-javascript
new Animate({ duration: 3000, step: function (p) { // Получаем элементы var Bar = document.querySelector('.progress_bar'), Val = document.querySelector('.progress_val'); // Указываем начальное значение var oldVal = 10, // Указываем новое значение newVal = 80; // Применяем Bar.style.width = (oldVal + ((newVal - oldVal) * p)) + '%'; Val.innerHTML = Math.round(oldVal + ((newVal - oldVal) * p)) + '%'; } }); .progress { display: inline-block; width: 200px; height: 12px; border: 1px solid black; border-radius: 6px; overflow: hidden; } .progress_bar { display: inline-block; width: 10%; height: 14px; background-color: #3f51b5; } .progress_val { display: inline-block; }
step – вызывается при каждом шаге анимации и возвращает процент завершённости анимации
