bug: ion-progress-bar transition cannot be overridden

[JZubero]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
When having quick data value updates (< 150ms), the ion-progress-bar components "jumps" back since the transition of the progress element has not finished yet. Since no CSS vars are used for that and there is no chance to use slots for injecting a progress element, that you can apply custom CSS rules to, there is no possibility to change the transition-duration.

Please see this video (dropbox link) for a demonstration.

Expected behavior:
Possibility to change transition-duration for ion-progress-bar via CSS vars.

Steps to reproduce:

1. Add an ion-progress-bar component to a template.
2. Bind the data attribute to a local property.
3. Create a loop (e.g. via setInterval) with a short update interval (< 150ms) to manipulate the bound property.
4. See the ion-progress-bar component tremble.

Repository with demo/reproduction code:

https://github.com/JZubero/ion-progress-bar-Issue-21820

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.1 (/home/js/.nvm/versions/node/v10.15.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.0
   @angular-devkit/build-angular : 0.803.28
   @angular-devkit/schematics    : 8.3.28
   @angular/cli                  : 8.3.28
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res (update available: 0.15.1) : 0.14.0
   native-run                             : 1.0.0

System:

   NodeJS : v10.15.0 (/home/js/.nvm/versions/node/v10.15.0/bin/node)
   npm    : 6.14.6
   OS     : Linux 5.4

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[JZubero]

Reproduction Code Repo: https://github.com/JZubero/ion-progress-bar-Issue-21820

[liamdebeasi]

Thanks! I was able to reproduce this behavior. This isn't really a "bug" in the framework, but rather just how CSS Transitions work. That being said, I think it makes sense to let users disable/override the transition if they wish.

[JZubero]

@liamdebeasi Yes, agreed. Looking forward to this feature. Thanks for quick feedback!

[dee22]

This is my first day learning ionic and this is one of a few things i recognized in a short period of time. This "feature" needs to be added for sure. It looks really messy with fast value changes for progress bar.

[hiddendragonXVII]

I was able to get around this by setting my set interval function to 150 ms so the transition works smoothly