是显示一个div时有可能得到转变翻页效果手动

Question

是否可以手动显示一个div时，类似的方式，我们使用的功能，如

$(':mobile-pagecontainer').pagecontainer("change", "create_an_account.html?UUID=" + UUID, { 
       transition: 'flip' 
      }); 

时获得获得过渡翻页效果这是我的小提琴

http://jsfiddle.net/EwNRJ/2265/

可否请你让我知道如何实现这一目标？

Answer 1

jQM为此使用CSS转换。对于翻转，您可以使用名为“.flip .in”的现有类翻转并翻转“.flip .out”以翻转。

$('#target') 
    .append('<span>1. Append</span>') 
    .prepend('<span>2. Prepend</span>') 
    .before('<span>3. Before</span>') 
    .after('<span>4. After</span>') 
    .show() 
    .addClass("flip in") 
    .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
     $(this).removeClass("flip in"); 
    }); 

您使用addClass添加过渡类（.addClass("flip in")），然后处理animationend事件删除类时转换完成。用翻转来隐藏DIV：

$('#target') 
    .addClass("flip out") 
    .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
     $(this).removeClass("flip out"); 
     $(this).hide(); 
    }); 

添加翻转和出来的类，并在animationend上删除类并调用hide（）。

DEMO

注：欲了解更多有趣的转变，您可以使用animate.css类似代码：

https://daneden.github.io/animate.css/