Почему не задается время прогресс-бару?

Question

[Old_Chicken]

Хочу при помощи input задавать длительность анимации для блока, у меня есть две анимации: fadeOut, которая делает появления и исчезновения блока, а также runProgress, нужная для прогресс-бара. Время, которое я задаю, применяется к fadeOut, а вот к runProgress нет, это можно заметить, если задать допустим 100, то блок будет появляться долго, а прогресс-бар все так же будет идти то время, которое указано в css. Как это исправить?

Answer 1

[0xD34F]

Время, которое я задаю, применяется к fadeOut, а вот к runProgress нет

Окей, посмотрим на эти fadeOut и runProgress:

this.fadeOut = `fadeOut ${this.time}s linear forwards`,
this.runProgress = `runProgress ${this.time}s liner forwards`,

Вам вопрос: чем отличаются эти две строки (конечно, помимо имён анимаций)?

UPD. А это вообще нормально - всем назначать одно и то же значение? В смысле, в шаблоне эти fadeOut и runProgress используются для задания анимации элементам, у которых есть предок с v-for. Если изменить значение свойства time и добавить в messages новый элемент, то у тех, что были добавлены раньше, изменится длительность анимации. Наверное, стоит вырезать свойства fadeOut и runProgress, элементам messages при создании добавлять актуальное значение свойства time, типа time: this.time, и использовать его при задании стилей:

methods: {
  getStyle: (name, { time }) => ({
    animation: `${name} ${time}s linear forwards`,
  }),
  ...

:style="getStyle('fadeOut', message)"

:style="getStyle('runProgress', message)"

Comments

[Old_Chicken]

Блин , увидел что не так , благодарю за подсказку