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

Question

是否有可能在手动显示 div 时获得过渡翻转效果，类似于我们在使用

等功能时获得的方式

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

这是我的fiddle

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

添加翻转和输出类并在动画结束时删除类并调用 hide()。

DEMO

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

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

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

Is it possible to get transition flip effects when showing a div manually

jquery-mobile

transition