无法将 "transform" 添加到 css 以获得自定义 Bootstrap 模态动画

Question

我的页面中有一个按钮。它的onclick方法是这样的：

function showModal(){
    $(".modal.fade.in .modal-dialog").css({"transform": "translate(50px, 10px)"});
    alert($("modal.fade.in .modal-dialog").css("transform"));
    $('#mymodal').modal('show');
}

我不明白为什么警报显示 undefined。我似乎无法添加转换属性。 #mymodal 出现时没有那个转换。

我做错了什么？

Answer 1

.in class 只有在打开后才会添加到 .modal class 中。

当您调用 $(".modal.fade.in .modal-dialog").css({"transform": "translate(50px, 10px)"}); 时，选择器 return 是一个空数组。

即使在 showModal() 函数中您首先调用了 $('#myModal').modal('show');，您也无法使其工作。这是因为 .in class 是在模态加载时添加的，由于模态打开时的动画需要几毫秒。

要使其正常工作，请从您的选择器中删除 .in class

function showModal() {
    $(".modal.fade .modal-dialog").css({"transform": "translate(50px, 10px)"});
    alert($("modal.fade .modal-dialog").css("transform"));
    $('#myModal').modal('show');
}

Here是bootply中的demo。如您所见，CSS 转换在页面加载时添加，当您单击打开模式时，警报包含设置的转换。

编辑：作为经验法则，我发现不能通过使用 .css() 来设置过渡来分配过渡。我通常做的是创建具有这些过渡的 CSS classes 并将 class 添加到我想要制作的元素中。

CSS:

.effect1.modal.fade .modal-dialog {
     transform: scale(0.1); transition: all 1s; 
}

.effect1.modal.fade.in .modal-dialog { 
    transform: translate(500px, 50px); 
}

JavaScript:

function showModal() {
    $('#myModal').addClass('effect1');
    $('#myModal').modal('show');
}

所以，看看 here 我在 CSS 中创建了两个效果，.effect1 和 .effect2。在按钮上单击我设置我需要的 class，然后打开模式 window。

Edit2：因为你想要在x和y中使用动态值，我们需要采取另一种方法。

以下代码段使用 shown.bs.modal 和 hidden.bs.modal 事件来设置和取消设置（重要！！）自定义 CSS 规则。

另一个重点是从模态中删除 .fade class 因为这会产生冲突。

现在，您只需将 getTransform() 函数中的逻辑应用到 return 您需要的任何 transform 值。 flag 的使用仅用于演示。

var flag = false;

function getTransform() {
  flag = !flag;
  return (flag ? "translate(500px, 50px)" : "translate(200px, 20px)");
};

$('#myModal').on('shown.bs.modal', function() {
    $("#myModal .modal-dialog").css({"transform": getTransform() });
});

$('#myModal').on('hidden.bs.modal', function() {
    $("#myModal .modal-dialog").css({"transform": "" });
});

jQuery('#open1').click(function() {
  $('#myModal').modal('show');
});

看看here。

Answer 2

你不必为此使用 JavaScript，CSS 就可以了：

.modal.fade .modal-dialog {
  -webkit-transform: translate(50px, 10px);
      -ms-transform: translate(50px, 10px);
       -o-transform: translate(50px, 10px);
          transform: translate(50px, 10px);
}

您的代码无效，因为您使用 fade.in 而不是 .fade。

function showModal(){
    $(".modal.fade .modal-dialog").css({"transform": "translate(50px, 10px)"});
    $('#mymodal').modal('show');
}

无法将 "transform" 添加到 css 以获得自定义 Bootstrap 模态动画

Can't add "transform" to css to have custom Bootstrap modal animations

javascript

css

jquery

twitter-bootstrap

bootstrap-modal