Removing and adding back transition & width style on div does not remove style

Question

I am trying to create a progress bar for an image carousel on hover. When the carousel reaches its end the progress bar also should reset but it doesn't.

What I do is remove the style of width and transition when the carousel ends and add it back.

Here is the code. I am doing it in vuejs.

if (!nextSlide) {
          this.carouselProgress.style.transition = "none";
          this.carouselProgress.style.width = 0 + "%";
          currentSlide.classList.remove("current-slide");
          this.initialSlide.classList.add("current-slide");
          nextSlide = this.initialSlide;
          this.carouselProgress.style.width = 100 + "%";
          this.carouselProgress.style.transition = `width ${
              1.5 * numberOfSlide
          }s ease-in`;
        }

You can see in the first 2 lines and last 2 lines in the if statement how I am removing and reapplying the styles but it does not work.

Can anyone suggest me an alternate solution.

you can create two different classes, one for adding and one for removing. Then apply conditional class to the element using the nextSlide parameter — Shreeraj, Jul 06 '22 at 05:33
I could do that but my transition can change and I wont be able to calculate transition time in class. — Saaransh Menon, Jul 06 '22 at 06:47
can you try placing watcher on nextSlide and do the logic in there on the basis of it's value? — Shreeraj, Jul 06 '22 at 07:00
okay. Please try using computed properties and then pass them as props via :style — Shreeraj, Jul 06 '22 at 12:00

Removing and adding back transition & width style on div does not remove style

0 Answers0