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

Question

Is it possible to get transition flip effects when showing a div manually, similar way as we get when using functions like

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

This is my fiddle

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

Could you please let me know how to achieve this??

Answer 1

jQM uses CSS transitions for this. for flip, you can use the existing classes called ".flip .in" to flip in and ".flip .out" to 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");
  });

You use addClass to add the transition classes (.addClass("flip in") ), then handle the animationend event to remove the classes when the transition is complete. To hide the DIV with a flip:

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

Add the flip and out classes and on animationend, remove the classes and call hide().

DEMO

NOTE: For more interesting transitions, you can use animate.css with similar code:

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