Как настроить плавное появление?

Question

[drtvader]

Привет!
Есть верстка в песочнице.
Пока скрипта нет, но есть стили. Как сделать смену градиентов плавной.
Сейчас на родительский блок добавлен background с градиентом, который отображает 100% выполненного условия, в нем есть 5 блоков, каждый из блоков имеет свой градиент, для показа статуса, на каждом этапе, при выполнении условий добавляется класс active с opacity: 1; , последний блок содержит background transparent.
Итак вот, плавность была достигнута через transition: opacity 0.5s, visibility 0.3s, linear 0.5s; Но при этом в правой части успевает появиться бэк родительского градиента, как бы исправить это?

Полное выполнение условий


Одно из начальных состояний

Comments

[Алексей Струков]

А может проще сделать это одним блоком с градиентом?
А при выполнении условий добавлять класс, который будет изменять градиент

[Алексей Струков]

даже лучше сделать один блок с градиентом, а второй поверх него с прозрачным градиентом будет сдвигаться вправо.

[drtvader]

Алексей Струков: а если без переверстки? я в анимации пока не силен, но может можно как-то

[Алексей Струков]

drtvader: лучше переверстать. Так и так скрипт еще не написан, так что ничего не рухнет. В общем делаешь полосу с градиентом. Потом создаешь в этом блоке псевдоэлемент с абсолютным позиционированием и выставляешь его так, чтобы он ровно закрывал блок. Далее, при выполнении условий, скрипт должен присваивать ему классы, в которых верхний блок будет сдвигаться вправо через transform на 20, 40, 60, 80, 100 процентов. Если сам не разберешься, то как буду у компа напишу тебе этот компонент

[drtvader]

Алексей Струков: спасибо) если что напишу)