引导模态缩放和翻译答案

【问题标题】：bootstrap modal scale and translate引导模态缩放和翻译
【发布时间】：2017-11-07 14:22:43
【问题描述】：

我的引导模式有带翻译的动画。

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

所以引导模式从上到中淡出。一切正常，但是当我想为此模态应用比例时会重置转换：

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

所以我的比例重置我的翻译没关系，所以我应用了多个变换条件：

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

但在这种情况下，我的模式表现得像平移和缩放一样，效果就像 zoomIn。

我如何应用该模态对话框首先缩放，然后在缩放模态应用从顶部到中间的过渡？请帮忙！

【问题讨论】：

标签： twitter-bootstrap-3 modal-dialog bootstrap-modal

【解决方案1】：

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

我创建了一个小提琴并很快对其进行了测试：Modal example with keyframes

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

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

然后你调用“动画”而不是“过渡”来使关键帧像这样工作：

animation: mymove 2s ease-out;

动画完成后，模态框的状态将恢复正常（无缩放，无过渡） - 这就是我们必须添加以下行的原因：

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

希望这会有所帮助！

【讨论】：