javascript - JQuery mobile - Use transitions without using changePage -

-

i using jqm 1.4 , backbone together.

in beginning of project, using config file disable jqm router , use backbone 1 instead, called jqm "changepage" method programmatically on hash change.

but i've got problems making work want, while need changepage css3 transition.

the best option have find way use jquery mobile transitions (slide, pop, fade...) without using changepage. if use transitions on divs, perfect.

any clue on how ? know there fine libraries effeckt.css think jqm more mobile-cross-browser compatible (correct me if wrong).

animation classes in jquery mobile can found here. use them, need add animation class name e.g. fade plus animation class, either in or out.

moreover, make sure remove classes after animation ends listening animationend event.

$("element")     .addclass("in pop")     .one('webkitanimationend mozanimationend msanimationend oanimationend animationend', function () {     $(this)         .removeclass("in pop"); /* remove animation classes */ });

update 1

check browser's animation/transition support, below should return true.

$.support.cssanimations $.support.csstransitions $.support.csstransform3d

for example

if (!$.support.cssanimations) {   /* don't animate */ }

update 2

the default fallback transition browsers don't support transform3d fade. below code updated reflect checking whether current browser supports transform3d.

details

let's want animate below divs dynamically in or out.

<!-- buttons demo --> <a href="#" class="ui-btn ui-btn-inline" data-custom="in">animate-in</a> <a href="#" class="ui-btn ui-btn-inline" data-custom="out">animate-out</a> <!-- divs --> <div class="animatediv" data-transition="pop"></div> <div class="animatediv" data-transition="flip"></div>

add data-transition attribute div should be equal animation class. also, add data-custom or custom data attribute define in direction divs animated, whether in or out.

then control them js.

$(document).on("pagecreate", function (e, ui) {     /* check support */     var support = $.support.csstransform3d && $.support.csstransitions && $.support.cssanimations ? true : false;      $(".ui-btn").on("click", function () {         var direction = $(this).data("custom"); /* in or out */         $(".animatediv").each(function () {             var animation = support ? $(this).data("transition") + " " + direction : "fade " + direction; /* set "fade" if support false */             $(this).addclass(animation);         });     });      $(document).on("webkitanimationend mozanimationend msanimationend oanimationend animationend", ".out, .in", function (e) {         var outorin = $(this).hasclass("in") ? "in" : "out",             animated = support ? $(this).data("transition") : "fade";         $(this).removeclass(animated);     }); });

demo - code

demo - code (fallback)

bonus demo


Comments

Post a Comment

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

-
i used pyinstaller create standalone exe file pyqt project. did not use single file option because exe created single file option takes long open. therefore, pyinstaller created dist folder contains bunch of files including program.exe file. create setup.exe file place contents of dist folder in program directory , create shortcut in start menu , on desktop. want super simple user. maybe setup.exe files when download program cnet. found inno-setup, looks promising. however, not know if there special considerations because program standalone program create python/pyqt program. thanks! have experience task? there program using task not know about? inno-setup or nsis easiest use. tell them files include , put them , create nice installer you. wrote short tutorial on experiences using innosetup might find helpful: http://www.blog.pythonlibrary.org/2008/08/27/packaging-wxpymail-for-distribution/ note tutorial based around wxpython app wrote, concepts same.
Read more

c# - Access objects in UserControl from MainWindow in WPF -

-
i have simple xaml, how can change text property of textblock in usercontrol1 mainwindow ? <window x:class="refactorxaml.mainwindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:refactorxaml="clr-namespace:refactorxaml" title="mainwindow" height="350" width="525"> <grid> <grid.rowdefinitions> <rowdefinition height="100"></rowdefinition> <rowdefinition height="100"></rowdefinition> </grid.rowdefinitions> <grid> <refactorxaml:usercontrol1></refactorxaml:usercontrol1> </grid> <grid grid.row="1"> <button>change text</button> </grid> </grid> </window> <usercon...
Read more

javascript - How to name a jQuery function to make a browser's back button work? -

-
i'm trying write function ajaxyfy web site, works perfect, except function button. that's have now: function loading() { if (typeof history.pushstate !== "undefined") { var historycount = 0; $('.menu-item, .logo').on('click','a',function(e){ e.preventdefault(); $(this).data('clicked', true); if ($(this).is('.logo a')) { var homepage = $(this).attr('href'); function1(homepage); history.pushstate(null, null, homepage); } else if ($(this).is('.projects a')) { var projects = $(this).attr('href'); function2(projects); history.pushstate(null, null, projects); } else { var pages = $(this).attr('href'); function3(pages); history.pushstate(null, null, pages); ...
Read more