Carousel Caption Animation

Topic: Carousel Caption Animation

Sebopede free asked 4 years ago

Expected behavior The Css Animation on the caption is supposed to restart everytime a slide comes into view.

Actual behavior The CSS animation only triggers once, then once the same slide comes back into view, the CSS does not trigger again

Resources (screenshots, code snippets etc.)

Arkadiusz Idzikowski staff commented 4 years ago

How exactly did you add the animation to the caption element? Please provide some code on which we will be able to reproduce that.

Add comment

Sebopede free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

I litterally copied the code from the 8th carousel in the carousel component. The animations only happen once when the picture slides. Then, after sliding 2 times, when the picture comes back to the first original picture, the css does not trigger anymore... I dont understand, am i supposed to override the caption class with the onSlideChange and remove/add the fadeDown class everytime?

<div class="carousel-caption">
  <div class="animated fadeInDown">
    <h3 class="h3-responsive">Light mask</h3>
    <p>First text</p>
  </div>
</div>


<div class="carousel-caption">
  <div class="animated fadeInDown">
    <h3 class="h3-responsive">Super light mask</h3>
    <p>Secondary text</p>
  </div>
</div>


<div class="carousel-caption">
  <div class="animated fadeInDown">
    <h3 class="h3-responsive">Strong mask</h3>
    <p>Third text</p>
  </div>
</div>

Arkadiusz Idzikowski staff commented 4 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 4 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.

<p>Hi <a href="/profile/?id=85450" target="_blank" rel="nofollow">@Sebopede</a>,</p>

<p>Can you add <code>delay-1s</code> class for your carousel caption?</p>

<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>
</code></pre>

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

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.7.0
Device: Monitor
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

Sebopede

80Support score
2Questions 7Answers 3Snippets