Multiple onClick Animation Targets from single button


Topic: Multiple onClick Animation Targets from single button

edavey pro premium priority asked 7 months ago

I have multiple divs, each with a different animation type, delay etc.

I would like them all to load with the click of a single button.

I am able to get the button to start the animation of a single div by using data-mdb-animation-target="#..."

However I would like this button to start the animation of multiple divs

what is the syntax for having multiple data-mdb-animation-targets???

animation-target="#divid1 #divid2 #divid3"???

see below html

<!-- Submit button -->
<div class="container-fluid d-flex justify-content-center p-5">
    <button data-mdb-ripple-init type="submit" class="btn btn-primary" id="load-report-button" data-mdb-animation-init data-mdb-animation-target="#left-headline">Load Dashboard</button>   
</div>

<!-- Headline Tiles -->
<div class="row">
    <div class="col-xl-4 col-lg-4 col-md-12 pb-5">
        <div id="left-headline" class="container-fluid p-5 shadow-lg rounded-5 d-flex justify-content-center align-items-center" style="height: 25vh;" data-mdb-animation-init data-mdb-animation="fade-in-down" data-mdb-animation-start="onClick">
            <p>Headline 1</p>
        </div>
    </div>
    <div class="col-xl-4 col-lg-4 col-md-12 pb-5">
        <div id="middle-headline" class="container-fluid p-5 shadow-lg rounded-5 d-flex justify-content-center align-items-center" style="height: 25vh;" data-mdb-animation-init data-mdb-animation="fade-in-down" data-mdb-animation-start="onClick" data-mdb-animation-delay="500">
            <p>Headline 2</p>
        </div>            
    </div>
    <div class="col-xl-4 col-lg-4 col-md-12 pb-5">
        <div id="right-headline" class="container-fluid p-5 shadow-lg rounded-5 d-flex justify-content-center align-items-center" style="height: 25vh;" data-mdb-animation-init data-mdb-animation="fade-in-down" data-mdb-animation-start="onClick" data-mdb-animation-delay="1000">
            <p>Headline 3</p>
        </div>            
    </div>
</div>

Kamila Pieńkowska staff answered 7 months ago

If you want to start animation for multiple animations from one button you need to add event listener to the button and trigger animations with JS.

https://mdbootstrap.com/snippets/standard/kpienkowska/6059099


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.2.0
  • Device: DELL laptop Processor 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
  • Browser: Chrome
  • OS: Windows 10 Enterprise Version
  • Provided sample code: No
  • Provided link: No