Carousel Caption Animation

Arkadiusz Idzikowski staff commented 5 years ago

It looks like a bug, we will take a closer look at that and see what we can do about that on our side. Probably js animation would make much more sense here.

The problem with css animation is that you often have to remove element and re-insert it (removing and reapplying class is not an ideal solution). As a workaround here you could try to to hide and show the element with *ngIf directive on (activeSlideChange) output.

Konrad Stępień staff commented 5 years ago

Hi @Sebopede,

Can you add delay-1s class for your carousel caption?

Like this:

<mdb-carousel [isControls]="true" class="carousel" [animation]="'slide'">
  <mdb-carousel-item>
    <div class="view">
      <video class="video-fluid" autoplay loop>
        <source src="https://mdbootstrap.com/img/video/Lines.mp4" type="video/mp4" />
      </video>
      <div class="mask rgba-indigo-light waves-light" mdbWavesEffect></div>
    </div>

    <div class="carousel-caption">
      <div class="animated fadeInDown delay-1s">
        <h3 class="h3-responsive">Light mask</h3>
        <p>First text</p>
      </div>
    </div>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <div class="view">
      <video class="video-fluid" autoplay loop>
        <source src="https://mdbootstrap.com/img/video/animation-intro.mp4" type="video/mp4" />
      </video>
      <div class="mask rgba-purple-slight waves-light" mdbWavesEffect></div>
    </div>

    <div class="carousel-caption">
      <div class="animated fadeInDown delay-1s">
        <h3 class="h3-responsive">Super light mask</h3>
        <p>Secondary text</p>
      </div>
    </div>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <div class="view">
      <video class="video-fluid" autoplay loop>
        <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
      </video>
      <div class="mask rgba-black-strong waves-light" mdbWavesEffect></div>
    </div>

    <div class="carousel-caption">
      <div class="animated fadeInDown delay-1s">
        <h3 class="h3-responsive">Strong mask</h3>
        <p>Third text</p>
      </div>
    </div>
  </mdb-carousel-item>
</mdb-carousel>

The animation works correctly, but too fast. And if you add delay-1s class or better way is adds animation-delay: 0.5s; style. Because if slide change image it automatically starts run animation, and when the slide finishes the caption also finish the animation.