Bootstrap has many beautiful features. One of the most familiar bootstrap features is Modal. For those who don’t know what modal is, modal is a popup menu provided by Bootstrap. With the modal, it is no longer difficult for us to make a minimalist responsive popup again.
Modal bootstrap itself actually already has a default animation that is fade animation. For those of you lovers of design, of course it is very boring if the animation shown is all. Well, this time we will discuss how to enhance your boostrap modal with Animate.Css.
Get straight to the point of the discussion, please visit https://daneden.github.io/animate.css/ to see examples of what animations are available. Now for more details, I’ll just show the table. Is as follows :
Animation Code | ||
---|---|---|
bounce |
flash |
pulse |
rubberBand |
shake |
wobble |
headShake |
swing |
tada |
bounceInLeft |
bounceOutDown |
fadeIn |
jello |
bounceIn |
bounceInDown |
bounceInRight |
bounceInUp |
bounceOut |
bounceOutLeft |
bounceOutRight |
bounceOutUp |
fadeInDown |
fadeInDownBig |
fadeInLeft |
fadeInLeftBig |
fadeInUpBig |
fadeOutLeft |
fadeInRight |
fadeInRightBig |
fadeInUp |
fadeOut |
fadeOutDown |
fadeOutDownBig |
fadeOutLeftBig |
fadeOutRight |
fadeOutRightBig |
fadeOutUp |
flipOutX |
rotateIn |
fadeOutUpBig |
flipInX |
flipInY |
flipOutY |
lightSpeedIn |
lightSpeedOut |
rotateInDownLeft |
rotateInDownRight |
rotateInUpLeft |
rotateInUpRight |
rotateOutUpLeft |
rollIn |
rotateOut |
rotateOutDownLeft |
rotateOutDownRight |
rotateOutUpRight |
hinge |
jackInTheBox |
rollOut |
zoomIn |
zoomInDown |
zoomInLeft |
zoomOutDown |
slideInDown |
zoomInRight |
zoomInUp |
zoomOut |
zoomOutLeft |
zoomOutRight |
zoomOutUp |
slideInLeft |
slideInRight |
slideInUp |
slideOutLeft |
slideOutRight |
slideOutUp |
heartBeat |
slideOutDown |
 |
Beautify Bootstrap Modal Animation With Animate.CSS
And for implementation, please add animate class followed by the type of animation. Example: <div class = “animate rollIn”> </div>. For application to bootstrap modal, please pay attention to the following modal code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContoh"> Klik Saya </button> <div class="modal fade" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header bg-dark text-light"> <h5 class="modal-title">Contoh Modal</h5> <button type="button" class="close text-light" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Isi modal </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button> </div> </div> </div> </div> |
look at this syntax :
1 |
<div class="modal fade" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"> |
change ‘fade’ with “animate (animation type)”, for example, rollIn animation, while chance becoming :
1 |
<div class="modal animated rollIn" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"> |
So if we apply directly with all css and js bootstrap, then the complete coding is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Integrasi Modal Bootstrap dengan Animate.css"> <meta name="author" content="Detri Amelia Chandara"> <meta name="generator" content="Jekyll v3.8.5"> <title>Percantik Animasi Modal Bootstrap dengan Animate.css</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body class="bg-light"> <div class="container text-center mt-3 pt-3"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContoh"> Klik Saya </button> <div class="modal animated rollIn" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header bg-dark text-light"> <h5 class="modal-title">Contoh Modal</h5> <button type="button" class="close text-light" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Isi modal </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button> </div> </div> </div> </div> </div> <footer class="my-5 pt-5 text-muted text-center text-small"> <p class="mb-1">© 2019 Detri Amelia Chandra</p> </footer> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> </body> </html> |
Please copy and see the results, don’t forget if you want to change the animation type, please change the bounce to another animation type.
[the_ad id=”651″]
Hopefully this article is useful about beautifying the bootstrap modal animation with this animate.css. Please share, don’t forget to comment if there is something you don’t understand …
Komentarin aja ya, jangan malu malu…
Alhamdulillah… tutorialnya sangat simple, padat dan sangat mudah diterapkan…
Alhamdulillah, semoga membantu 🙂
Terimakasih, pembelajaran yg sangat bermanfaat…
Terimakasih sudah berkunjung… 😀