javascript - Bootstrap 4下拉动画

Question

如何在下拉菜单上使用一些动画？看看stripe.com页脚并单击位置或语言链接。我已经录制了这个效果的视频:

https://www.youtube.com/watch?v=WV0h2zlE7fQ或更糟糕的 GIF 版本 http://g.recordit.co/w1S4fSrUBA.gif

如果可以使用其中一些库，那就太好了:

• Dynamics.js
• Animate.css

我的外部 html/js/css 编码器告诉我，这是不可能的，因为 Bootstrap 4 使用 transform 属性来定位下拉菜单本身。

使用默认 Bootstrap 设置准备了 jsfiddle。 https://jsfiddle.net/7hq03Lov/4/

附加问题 - 是否也可以在模态上应用其他动画？

Answer 1

您可以通过css来完成，根据您的需要进行更改。

.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;
  }
}