Question

这是在 Bootstrap 3 ：

中完成的

.modal.fade .modal-dialog {
    -webkit-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}

或者像这样的东西也会起作用：

.modal.fade .modal-dialog {
  transform: translate3d(0, -25%, 0);
}
.modal.in .modal-dialog {
  transform: translate3d(0, 0, 0);
}

魔术显然发生在具有transform属性的模态类中。但这不适用于 Bootstrap 4 。我特意使用Bootstrap v4.0.0-alpha.5。为达到同样的效果，我需要做出哪些改变？

演示网址 - https://jsfiddle.net/qww47vfn/

Answer 1

找到它，应用以下CSS：

.modal.fade .modal-dialog {
    -webkit-transform: translate(0,25%);
    -ms-transform: translate(0,25%);
    -o-transform: translate(0,25%);
    transform: translate(0,25%);
}

我已经改变了变换原点，而不是-25％，它现在是25％（有效地使它从下面淡入）。调整量以调整初始淡入淡出位置。

改变了什么？

现在正在使用属性translate3d而不是translate，因此更改原始值无关紧要，因为模型现在会侦听新属性。

旁注：

由于某种原因将其作为新规则实现时，这不起作用，我没有本地版本的bootstrap，但在DevTools中更改它为我解决了它。我想你需要覆盖初始代码来改变它。

用于Bootstrap 4模式的CSS从底部滑入

1 个答案:

改变了什么？

旁注：