Various transition animations are supported during navigation between pages. Please note that some transitions may not be supported in some platforms and fade is used as a fallback.
Source
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <f:view renderKitId="PRIMEFACES_MOBILE" /> <h:head> <style type="text/css"> .ui-grid-a div { padding: 0em 0.5em; } </style> </h:head> <h:body> <pm:page id="first"> <pm:header title="Transition" swatch="b"></pm:header> <pm:content> <p>Various transition animations are supported during navigation between pages. Please note that some transitions may not be supported in some platforms and fade is used as a fallback.</p> <p:panelGrid columns="2"> <p:button outcome="pm:second?transition=fade" value="Fade" /> <p:button outcome="pm:second?transition=pop" value="Pop" /> <p:button outcome="pm:second?transition=flip" value="Flip" /> <p:button outcome="pm:second?transition=turn" value="Turn" /> <p:button outcome="pm:second?transition=flow" value="Flow" /> <p:button outcome="pm:second?transition=slidefade" value="SlideFade" /> <p:button outcome="pm:second?transition=slide" value="Slide" /> <p:button outcome="pm:second?transition=slideup" value="Slideup" /> <p:button outcome="pm:second?transition=slidedown" value="Slidedown" /> <p:button outcome="pm:second?transition=none" value="None" /> </p:panelGrid> </pm:content> </pm:page> <pm:page id="second"> <pm:header title="Transition" swatch="b"> <p:button outcome="pm:first" value="Back" icon="ui-icon-arrow-l" styleClass="ui-toolbar-header-button-left ui-button-inline"/> </pm:header> <pm:content> <h1>Target Page</h1> </pm:content> </pm:page> </h:body> </html> |