Question

在寻找堆叠的莫代尔解决方案时，我偶然遇到了一个相当花哨的“ 疯狂的蝙蝠侠报纸棘手的东西”旋转效果。我想在我的网站上尝试一下它的外观，但是尝试实现这一点失败了，它似乎与Bootstrap（BS）3和BS4之间的差异有关。

‍‍‍‍‍

显示工作 BS3 效果的工作小提琴是：http://jsfiddle.net/p68bdgL2/

和使用 BS4 的相同代码不起作用：http://jsfiddle.net/d6uwoz1m/

‍‍‍‍‍

似乎可以实现效果的CSS是：

.rotate.in {
  transform: rotate(1800deg);
  transition: all 1.5s;
}

所以我在 bootstrap / 3.1.0 / css / bootstrap.min.css 达到了一个峰值，其中包含“ .in ”的条目，并且唯一相关的条目似乎是：

.fade.in {
    opacity: 1
}
.collapse.in {
    display: block
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}
.modal-backdrop.in {
    opacity: .5;
    filter: alpha(opacity=50)
}

“ 变换：translate（0，0）”看起来是最有可能的候选者，因此我将其粘贴到了我的代码中，但仍然无法正常工作。因此，我进行了快速搜索，发现以下内容为MDN web doc：

“ 您的浏览器不支持MathML。已改用CSS备用。”

因此，我没有使用 Chrome ，而是改用了 Firefox Developer Edition ，它似乎克服了上述错误，但不幸的是没有轮换问题。

‍‍‍‍‍

我完全不知道为什么旋转效果不再适用于BS4。

任何建议将不胜感激。

‍‍‍‍‍

出于好奇，我也想知道有关按钮单击的代码

$（' #openBtn '）。click（function（）{ $（'＃myModal'）。modal（{ 显示：真实 }） }）;

这似乎触发了模式窗口，即使id #openBtn似乎没有出现在HTML中。真的可以做一个解释来理解这种逻辑。

以前的堆叠模态旋转效果在BS4中不再起作用

0 个答案: