CODEWITHSUNDEEP
javascripttwitter-bootstrapanimationdropdown
Vojtech Lacina
Vojtech Lacina

Reputation: 340

Bootstrap 4 dropdown animation

how can I use some animation on dropdowns? Take a look on stripe.com footer and click on location or language links. I've record a video of this effect:

https://www.youtube.com/watch?v=WV0h2zlE7fQ or worse GIF version http://g.recordit.co/w1S4fSrUBA.gif

It would be nice if some of those libs can be used:

My external html/js/css coder told me, that is impossible due fact, that Bootstrap 4 use transform property for positioning of dropdown menu itself.

Prepered jsfiddle with default bootstrap setup. https://jsfiddle.net/7hq03Lov/4/

Additional question - can be some any other animation applied on modal too?

Upvotes: 0

Views: 2331

Answers (1)

Rajeev
Rajeev

Reputation: 41

You can do it via css, Change as per your need.

.dropdown .dropdown-menu{
    -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) alternate both;
            animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) alternate both;
}
@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}

Upvotes: 4

Related Questions