CODEWITHSUNDEEP
jquerybootstrap-modalbootstrap-4animate.css
Julez
Julez

Reputation: 1050

Animate.css On Bootstrap 4 Modal

I'm using Animate.css to animate Bootstrap 4 Modal. I'm using rubberBand and bounceOutLeft for the opening and closing respectively.

This is my code:

$('#contactModal').on('show.bs.modal', () => {
        $('.modal').animateCss('rubberBand');
}).on('hidden.bs.modal', function (event) {
        $('.modal').animateCss('bounceOutLeft');
});

The opening (rubberBand) is working but closing bounceOutLeft is not. I also tried this code but it's not working either:

$('.modal .close').click(() => {
        $('.modal').animateCss('bounceOutLeft');
});

Please help. Thank you.

Upvotes: 1

Views: 8913

Answers (3)

Ajay Kumar
Ajay Kumar

Reputation: 3250

With animate.css ver 4.1.0, I did it like this:

In modal:

<div id="userDetailsModal" class="modal fade animate__animated animate__rotateInUpRight animate__faster" tabindex="-1"
    role="dialog"  aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">User Details</h5>
                <button type="button" class="close close-icon" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
<div class="modal-body">
....
<div class="modal-footer">
 <button id="closemodalclass" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

And using below jquery I could animate the open/close actions of modal. Here we need to add and remove classes. Here I applied the close animation on both buttons. The one on the top-right corner (x icon) of the modal and another regular button in the footer.

<script>
$('#closemodalclass').on('click', function() {
    $("#userDetailsModal").removeClass("animate__rotateInUpRight").addClass("animate__rollOut");
});
    
$('.open-modal-btn').on('click', function() {
    $("#userDetailsModal").removeClass("animate__rollOut").addClass("animate__rotateInUpRight");
});

$('.close-icon').on('click', function() {
    $("#userDetailsModal").removeClass("animate__rotateInUpRight").addClass("animate__rollOut");
});
</script>

Upvotes: 0

Rsz
Rsz

Reputation: 11

This is my first post, sorry if I'm not posting correctly.

Using bootstrap modal events:

HTML

<div id="some-modal" class="modal animated" tabindex="-1" role="dialog">
   ...
</div>

JS

// Different effects for showing and closing modal
let fadeIn = 'rollIn';
let fadeOut = 'rubberBand';

// On show
$('#some-modal').on('show.bs.modal', function () {
    $(this).removeClass(fadeOut);
    $(this).addClass(fadeIn);
});

// On closing
$('#some-modal').on('hide.bs.modal', function (e) {
    let $this = $(this);

    // Check whether the fade in class still exists in this modal
    // if this class is still exists prevent this modal
    // to close immediately by setting up timeout, and replace
    // the fade in class with fade out class.
    if ($this.hasClass(fadeIn)) {
        $this.removeClass(fadeIn);
        $this.addClass(fadeOut);
        e.preventDefault();

        setTimeout(function () {
            $this.modal('hide');
        }, 1000); // the default delays from animate.css is 1s
    }
});

You might want to replace the hardcode timeout with some array/obj variable.

Upvotes: 1

Yasir
Yasir

Reputation: 687

Exclude the bootstrap attributes to open and close the model from the buttons:

HTML

<button id="openmodal" type="button" class="btn btn-outline-warning btn-lg btn-lg-rounded btn-lg-min-width">
  Contact Me
</button>

<button id="btnclosemodel" type="button" class="close" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>

Customise your script to show and hide the modal to resolve the problem:

JS

  // Hide the Modal after the animation
  $("#btnclosemodel").click(function() {
    $('#contactModal.modal').animateCss('bounceOutLeft', function() {
      $("#contactModal").modal("hide");
    });
  });

  //show the Modal and then animate
  $("#openmodal").click(function() {
    $("#contactModal").modal("show");
    $('#contactModal.modal').animateCss('rubberBand');
  });
});

Upvotes: 2

Related Questions