是顯示一個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/