Question

我想使用3D翻转效果显示模态对话框，与the Effeckt.css library中的“3D翻转（水平）”示例完全相同。

但是我真的不需要整个Effeckt库，因为我只想要这个效果。所以我试图将库的相关部分删除为独立的CSS和JavaScript。

这是我的尝试，但它不起作用：http://jsfiddle.net/eJsZx/

正如JSFiddle所展示的，它只显示重叠 - 而不是模态本身。这很奇怪，因为元素检查器建议模态应该是可见的 - 它有display: block，visibility: visible和zindex: 2000（高于覆盖元素）。

这是JavaScript：

$('button').on('click', function() { 
  $("#effeckt-modal-wrap").show();
  $("#effeckt-modal-wrap").addClass('md-effect-8');
  $("#effeckt-modal-wrap").addClass("effeckt-show");
  $('#effeckt-overlay').addClass("effeckt-show");

  $(".effeckt-modal-close, .effeckt-overlay").on("click", function() {
    $("#effeckt-modal-wrap").fadeOut();
    $('#effeckt-modal-wrap').removeClass("effeckt-show");
    $("#effeckt-modal-wrap").removeClass('md-effect-8');
    $('#effeckt-overlay').removeClass("effeckt-show");
  });   
});

我做错了什么？

Answer 1

代码中存在一些问题。

首先，你的风格缺少以下内容：

.effeckt-show .effeckt-modal {
    visibility: visible;
}

这导致模态保持不可见。

一旦对话框可见，对话框就会旋转得很好，但是当被解除时它不会旋出。这是由于以下几行：

 $("#effeckt-modal-wrap").removeClass('md-effect-8');

如果要删除此类，则需要在动画完成后完成，否则3d效果将丢失。它不一定需要删除，但这取决于您的其他内容需要什么。

最后一个问题是，在完成淡出时，包装器将其本地样式设置为display: none。因此，第二次显示对话框会导致它出现，因为它正在从display: none移动到display: block。这里有几个选择。

使用CSS为淡入/淡出设置动画。
在元素上调用$ .show后使用window.setTimeout为dom提供更新的机会。

最终结果：Working Fiddle

使用CSS3过渡翻转效果来显示模态对话框？

1 个答案: