Как сделать CSS transition в одну сторону?

Question

[MikUrrey]

Всем привет!
Имеется прогрессбар, который благодаря transition плавно заполняется от 0 до 100%.
Как сделать так, чтобы изменение размера от 100% до 0 происходило резко, без анимации?

.progress {
  &-line {
    flex-basis: 100%;
    height: .25rem;
    background: #ccc;
    position: relative;
    overflow: visible;
    border-radius: 4px;
  }
  &-bar {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    transform: scaleX(0); // это свойство отражает прогресс, изменяясь от 0 до 1
    transform-origin: left center;
    transition: transform .2s;
    background-color: #44b9e7;
    border-radius: 4px;
    box-shadow: 0 0 10px 0 #44b9e7;
  }
}

https://codepen.io/MikUrrey/pen/zYdRLZV (в момент нажатия на RESET сброс происходит плавно, а желательно резко)

Comments

[Виталий Першин]

При каких условиях меняется ваш прогресс бар? Покажите полный пример

[MikUrrey]

Виталий Першин, добавил в вопрос ссылку с примером

Answer 1

[Виталий Першин]

Как вариант с добавлением/удалением класса, который отвечает за анимацию:

Comments

[MikUrrey]

Странно, но именно в моем скрипте не работает, хотя на примерах получилось именно так, как надо.
Не знаю, может быть, из-за порядка событий и асинхронности в самом проекте, но не прокатывают такие штуки. Было бы здорово, если есть способ как-то задать направление в css

[Виталий Першин]

MikUrrey, У вас должно быть 2 состояния transition с нулевой скоростью и скоростью, которая вам нужна для анимации, без дополнительного класса или добавления transition через js ничего не получится.

но не прокатывают такие штуки.

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

[MikUrrey]

Виталий Першин, я понимаю, что дело в моем коде. А можно поподробнее о фреймах?

protected bindProgressbar() {
    if (this.loadProgressSelector) {
      const progressBar = document.querySelector(this.loadProgressSelector) as HTMLElement;
      this.deck.addEventListener('trackloadstart', (e) => {
        this.setProgressInfo('Start the track reading...');
        this.setProgressPercent('0%');
        progressBar.style.transform = 'scaleX(0)';
        progressBar.classList.add(this.barTransitionClass);
      });
      this.deck.addEventListener('trackprogress', (event:CustomEvent) => {
        const nativeEvent = event.detail.nativeEvent;
        const value = nativeEvent.loaded / nativeEvent.total;
        this.setProgressInfo('Track reading...');
        this.setProgressPercent(Math.round(value /4 / 100) + '%');
        progressBar.style.transform = 'scaleX('+(value / 4) + ')';
      });
      this.deck.addEventListener('trackload', (e) => {
        this.setProgressInfo('Track decoding...');
        this.setProgressPercent('25%');
        progressBar.style.transform = 'scaleX(0.25)';
      });
      this.deck.addEventListener('trackdecoded', (e) => {
        this.setProgressInfo('Track buffering...');
        this.setProgressPercent('50%');
        progressBar.style.transform = 'scaleX(0.5)';
      });
      this.deck.addEventListener('trackbuffered', (e) => {
        this.setProgressInfo('Track starting...');
        this.setProgressPercent('75%');
        progressBar.style.transform = 'scaleX(0.75)';
      });
      this.deck.addEventListener('trackstarted', (e) => {
        this.setProgressInfo('Ready');
        this.setProgressPercent('100%');
        progressBar.style.transform = 'scaleX(1)';
        progressBar.classList.remove(this.barTransitionClass);
      });
    }
  }

.progress {
  &-line {
    flex-basis: 100%;
    height: .25rem;
    background: #ccc;
    position: relative;
    overflow: visible;
    border-radius: 5px;
  }
  &-bar {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #44b9e7;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 #44b9e7;
    transform: scaleX(0);
    &-transition {
      transform-origin: left center;
      transition: transform .2s;
    }
  }
  &-text {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    color: #44b9e7;
    text-shadow: 0 0 10px #44b9e7;
  }
}

Примерно так. Простите, полный работающий пример привести не смогу - там довольно обширный контекст.

[Виталий Першин]

MikUrrey,

А можно поподробнее о фреймах?

К примеру если вы напишите последовательно добавление и удаление:

block.classList.remove('hide');
block.classList.add('hide');

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

А вот если написать вот так:

block.classList.remove('hide');
setTimeout(() => {
   block.classList.add('hide');
}, 0);

То add('hide') будет выполнен в следующей фрейме и если к примеру на элементе есть animation, то анимация сработает заново. Пример:

[MikUrrey]

Виталий Першин, спасибо, не знал о таком. То есть что-то типа этого должно быть?:

this.deck.addEventListener('trackloadstart', (e) => {
        this.setProgressInfo('Start the track reading...');
        this.setProgressPercent('0%');
        progressBar.style.transform = 'scaleX(0)';
        setTimeout(() => progressBar.classList.add(this.barTransitionClass), 0);
      });
      //........
      //........
      this.deck.addEventListener('trackstarted', (e) => {
        this.setProgressInfo('Ready');
        this.setProgressPercent('100%');
        progressBar.style.transform = 'scaleX(1)';
        setTimeout(() => progressBar.classList.remove(this.barTransitionClass), 0);
      });

[MikUrrey]

Виталий Першин, код, приведенный выше, работает, спасибо! Дело было именно во фреймах.

[Виталий Першин]

MikUrrey, Рад был помочь

Answer 2

[Роман Страх]

transition: transform .2s;
Вот эта строчка отвечает за быстроту анимации( из всего того что вы представили)

Comments

[MikUrrey]

Это понятно, но чтобы на нее повлиять во время сброса значения, надо хардкодить её в скриптах, а это не вэй.
И да, кстати, такой трюк не срабатывает:

progressBar.style.transition = 'none';
progressBar.style.transform = 'scaleX(0)';
progressBar.style.transition = 'transform .2s';