Question

手动显示div时是否可以获得转换翻转效果，类似于使用

等功能时的方式

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

这是我的小提琴

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

你能告诉我如何实现这个目标吗？

Answer 1

jQM为此使用CSS过渡。对于翻转，您可以使用名为＆＃34; .flip .in＆＃34;的现有类。翻转和＆＃34; .flip .out＆＃34;翻开。

$('#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();
  });

添加flip和out类并在animationend上删除类并调用hide（）。

<强> DEMO

注意：对于更有趣的转换，您可以使用类似代码的animate.css：

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

在手动显示div时是否可以获得转换翻转效果

1 个答案: