Использование эффектов перехода CSS3 для отображения модального диалога?

Question

Я хотел бы показать модальное диалоговое окно, используя эффект 3D-переворота, точно так же, как пример «3D-флип (горизонтальный)» в the Effeckt.css library.

Однако мне действительно не нужна вся библиотека 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. Здесь есть пара вариантов.

1. Используйте CSS для анимации вставки/выключения.
2. Используйте window.setTimeout после вызова $ .show для элемента, чтобы дать dom возможность обновить.

Конечный результат: Working Fiddle