Bootstrap 4 下拉动画答案

【问题标题】：Bootstrap 4 dropdown animationBootstrap 4 下拉动画
【发布时间】：2018-01-11 17:20:57
【问题描述】：

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

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

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

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

使用默认引导设置准备好 jsfiddle。 https://jsfiddle.net/7hq03Lov/4/

其他问题 - 也可以在模态上应用任何其他动画吗？

【问题讨论】：

我前段时间做了差不多这样的东西，也许你可以以此为基础：codepen.io/phiter/pen/BZdXbv
@Phiter 但这不在引导程序上还是我错了？

标签： javascript twitter-bootstrap animation dropdown

【解决方案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;
  }
}

【讨论】：