Как изменить длительность анимации в процессе анимации?

Question

[DTX]

codepen.io/anon/pen/wWywQm

Т.е. юзер нажимает кнопку, отправлется ajax, начинается загрузка. Она может идти и минуту. Но по окончании процесса надо отправить прогресс бар в конец. Как можно провернуть? И можно ли без дополнительных элементов?

Answer 1

[DTX]

codepen.io/anon/pen/xOYGgo

Answer 2

[Вячеслав Лебедев]

Почитай и свяжи с css анимацией :)

Comments

[DTX]

При чем тут XMLHttpRequest? Вопрос чисто про анимацию. Что делать в тот момент, когда загрузка отработала. В примере пробовал по классу изменять animation-duration, но на уже работающую анимацию это не повлияло.

[Вячеслав Лебедев]

DTX: в статье четко написано, как ты можешь контролировать текущий прогресс загрузки. Прочитай. Или ищи дальше css-only решение ;)

[DTX]

Вячеслав Лебедев: если бы загрузка сразу начиналась, то мб и подошло бы, а так есть TTFB, а оставлять прогресс в нуле на несколько мс не комильфо

[Вячеслав Лебедев]

DTX: Как вариант: попробуй посмотреть как это устроено на github, там когда по файлам ходишь сверху есть прогресс бар.

[Вячеслав Лебедев]

DTX: На счет ттфб, можешь ведь по setTimeout эмулировать, как будто загрузка началась, увеличивать ширину по 10px к примеру, а с анимацией на css получишь плавность.
Вот набросал пример: codepen.io/slavikse/pen/QEQwPg реализация оптимизирована, там еще пара штрихов осталась, но теперь я утащу это решение к себе))) пригодится

[Вячеслав Лебедев]

DTX: Окончательная реализация: codepen.io/slavikse/pen/QEQwPg. Теперь только заверну в модуль и когда нибудь пригодится и мне :)

[Вячеслав Лебедев]

DTX: кстати, чтобы связать с ajax, как только получаешь первый байт, перехватываешь управление (останавливаешь таймоут clearTimeout(timerID);) в переменную currentProgress будешь писать текущий прогресс (полученный из ajax, в той статье все это есть) и вызываешь каждый новый полученный байт (там число будет, переведи его в проценты) progressBar.style.width = `${currentProgress}%` и должно получится нормально суперски :) удачи