Анимация без использования JQuery

Как сделать функцию 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; }

10%

Ответ

В 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; }

10%

Подробнее про создание анимаций с помощью этой функции: 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; }

10%

step – вызывается при каждом шаге анимации и возвращает процент завершённости анимации