Question

我的bootstrap模态包含带有翻译的动画。

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

所以bootstrap模态从顶部到中间淡入淡出。一切正常，但当我想为这个模态应用比例时，重置转换：

.modal.in .modal-dialog {
    transform: scale(1.5)
}

所以我的刻度可以重置我的翻译，所以我应用了多个转换条件：

.modal.in .modal-dialog {
   transform: scale(1.5) translate(0,0)
}

但在这种情况下，我的模态在同一时间表现得像翻译和缩放，效果就像zoomIn。

如何应用该模态对话框是第一个缩放，然后在缩放模式上应用从顶部到中间的过渡？请帮忙！

Answer 1

您正在寻找的是所谓的＆＃34;关键帧＆＃34; （如果您想了解更多信息，请查看here）。

我创造了一个小提琴并很快测试了它：Modal example with keyframes

以下代码处理转换（缩放和转换）

@keyframes mymove {
  0%   {transform: scale(1);}
  50%  {transform: scale(1.2);}
  100% {transform: scale(1.2) translate(0, 100px);
}

然后你打电话给＆＃34;动画＆＃34;而不是＆＃34;过渡＆＃34;使关键帧像这样工作：

animation: mymove 2s ease-out;

动画完成后，模态的状态将恢复正常（无比例，无转换） - 这就是为什么我们必须添加以下行：

transform: scale(1.2) translate(0, 100px);

希望这有帮助！

bootstrap模态比例并翻译

1 个答案: