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

Question

这是如何在引导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属性的模态类中。但是这在引导程序4中不起作用。我专门使用引导v4.0.0-字母5。我需要做哪些改变才能达到同样的效果？

演示url - 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，因此更改原始值并不重要，因为模型现在会监听新的属性。

附带说明：

当您将它作为一个新规则来实现时，由于某种原因，这是行不通的，我没有本地版本的引导，但是在DevTools中更改它解决了我的问题。我想您需要重写初始代码来更改它。