1

我想显示一个使用 3D 翻转效果的模态对话框，就像Efeckt.css 库中的“3D 翻转（水平）”示例一样。

但是我真的不需要整个 Efeckt 库，因为我只想要这个效果。因此，我尝试将库的相关部分剥离为独立的 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");
  });   
});

我究竟做错了什么？

4

1 回答 1

2

代码中有几个问题。

首先，您的样式缺少以下内容：

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

这导致模态保持不可见。

一旦对话框可见，对话框就会很好地旋转，但是当被关闭时它不会旋转出来。这是由于以下行：

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

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

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

  1. 使用 CSS 动画淡入/淡出。
  2. 在元素上调用 $.show 后使用 window.setTimeout 让 dom 有机会更新。

最终结果：工作小提琴

于 2013-08-08T17:24:19.883 回答