使用CSS3转换翻转效果来显示模式对话框

Question

我想显示一个使用3D翻转效果的模式对话框，就像Effeckt.css库中的"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');

如果你想删除这个类，它需要在动画完成后完成，否则三维效果会丢失。它不一定需要删除，但这取决于您的其他内容需要什么。

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

1. 使用CSS设置淡入/淡出的动画
2. 在元素上调用$.show之后使用window.setTimeout，以便给dom一个更新的机会

最终结果：工作Fiddle