Реакция Bootstrap - как анимировать ProgressBar, когда значение увеличивается, но не при сбросе до 0%?

Question

Я использую компонент React Bootstrap ProgresBar с включенной анимацией. В текущем поведении анимация работает как при увеличении, так и при уменьшении прогресса. У меня есть сценарий использования, в котором я медленно увеличиваю прогресс с 0 до 100, а затем сбрасываю прогресс обратно на 0 и снова медленно увеличиваю его. При сбросе со 100 на 0 прогресс анимируется в обратном направлении, что очень смущает моих пользователей.

Желаемое поведение: анимация при (постепенно) увеличении с 0 до 100, но не анимация при сбросе с 100 до 0.

Кто-нибудь знает, как этого добиться?

Answer 1

Вот решение, опубликованное в этом выпуске :

Просто добавьте это к компоненту CSS:

.progress-bar[aria-valuenow="0"] {
    transition: none;
}

Когда значение now изменится на 0, переход не будет установлен и полоса сразу исчезнет. Работает только с нуля, хотя, если вы go от 80 до 30, вы все еще видите переход.