panel-animate.mustache revision 163214f6685497247d57aa5ea96fb233b3785fcf
f743002678eb67b99bbc29fee116b65d9530fec0wrowe<div class="intro">
80833bb9a1bf25dcf19e814438a4b311d2e1f4cffuankg <p>This example demonstrates how to instantiate a panel and use it in conjunction with the `"transition"` module to create an animated panel.</p>
1337c7673efc1f80f634139fbad7cbb98a0dc657ylavic<div class="example newwindow">
1337c7673efc1f80f634139fbad7cbb98a0dc657ylavic <a href="panel-animate-example.html" target="_blank" class="button">
1337c7673efc1f80f634139fbad7cbb98a0dc657ylavic View Example in New Window
4da61833a1cbbca94094f9653fd970582b97a72etrawick<h2>Creating an animated panel</h2>
4da61833a1cbbca94094f9653fd970582b97a72etrawick<h3>Setting Up The YUI Instance</h3>
4789804be088bcd86ae637a29cdb7fda25169521jailletc<p>To create an instance of a Panel on your page, the only module you need to request is the `panel` module. The `panel` module will pull in the `widget`, `widget-stack`, `widget-position`, `widget-position-align`, `widget-position-constrain`, `widget-stdmod`, `widget-buttons`, `widget-modality` and `widget-autohide` extensions it uses.</p>
4789804be088bcd86ae637a29cdb7fda25169521jailletc<p>For this example, we also need to use the `transition` module. This module allows us to easily create animations using CSS3 transitions, with a JavaScript timer fallback.
e50c3026198fd496f183cda4c32a202925476778covenerYUI({...}).use("panel", "transition", function(Y) {
e50c3026198fd496f183cda4c32a202925476778covener // We'll write example code here
6c3b9cebb551140fbb25d58bae08b539b3802133ylavic<p>Note, using the `panel` module, will also pull down the default CSS required for panel. The CSS that styles the Panel requires you to have the class `yui3-skin-sam` on a parent element, commonly the `<body>` tag.</p>
4f29b65ab4b547ad5dbe506e2d0ff5d12ead9247ylavic<h3>Instantiating the Panel</h3>
0a0df13b7f1f4f1a74fe295253d89ca3911b301aylavic<p>For this example, we'll instantiate a modal panel, set its visibility to false, and set some CSS properties. The following HTML will be used as the markup for the panel.</p>
0a0df13b7f1f4f1a74fe295253d89ca3911b301aylavic<div id="panelContent">
69301145375a889e7e37caf7cc7321ac0f91801erpluem <div class="yui3-widget-hd">
69301145375a889e7e37caf7cc7321ac0f91801erpluem Showing an animated panel
506bfe33206b2fece40ef25f695af39dd4130facjkaluza <div class="yui3-widget-bd">
506bfe33206b2fece40ef25f695af39dd4130facjkaluza <p>Making panels animate is easy with the "transition" module!</p>
d58a848a016d401b965111e50ef829e1641f7834minfrin<p>The JavaScript to instantiate the panel is as follows:</p>
2e6f4d654c96c98b761fb012fd25c5d5b1558c44sfvar panel = new Y.Panel({
17e6c95f3b22d18acdf8380fb26a8d0e10c80767ylavic srcNode: "#panelContent",
17e6c95f3b22d18acdf8380fb26a8d0e10c80767ylavic xy: [300, -300], //we render the panel off the page
17e6c95f3b22d18acdf8380fb26a8d0e10c80767ylavic modal:true,
17e6c95f3b22d18acdf8380fb26a8d0e10c80767ylavic visible:false,
330e16bea8fe9cace4de90c349750c03dfb1fe64ylavic value: "Close the panel",
330e16bea8fe9cace4de90c349750c03dfb1fe64ylavic action: function(e) {
330e16bea8fe9cace4de90c349750c03dfb1fe64ylavic hidePanel();
330e16bea8fe9cace4de90c349750c03dfb1fe64ylavic section: "footer"
d7205b1a86c51c27b71a2c458dc453fd53a261c1covener render:true
44ff304057225e944e220e981d434a046d14cf06covener<h3>Adding Animation</h3>
44ff304057225e944e220e981d434a046d14cf06covener<p>To create the animations, we need to set up transition properties on the panel's `boundingBox`. These properties consist of key/value pairs of CSS properties that we want to alter.</p>
5d1ba75b8794925e67591c209085a49279791de9covener<p>We define two methods `showPanel()` and `hidePanel()` that define transitions. We could also use the `visibleChange` event to toggle the animation based on the state. However, the benefit of this method is that it allows us to use callback functions after the `transition` has ended.</p>
032982212dbcc7c3cce95bf89c503bb56e185ac7kbrandfunction showPanel () {
032982212dbcc7c3cce95bf89c503bb56e185ac7kbrand panel.show(); //show the panel to make it visible, then transition it in.
caad2986f81ab263f7af41467dd622dc9add17f3ylavic duration: 0.5,
f7317ff316c2b141feea31bddb74d5d3fa1584edjortonfunction hidePanel () {
a34684a59b60a4173c25035d0c627ef17e6dc215rpluem duration: 0.5,
a34684a59b60a4173c25035d0c627ef17e6dc215rpluem top:"-300px"
1e2d421a36999d292042a5539971070d54aa6c63ylavic }, function() {
1e2d421a36999d292042a5539971070d54aa6c63ylavic panel.hide(); //hide the panel after this transition ends
0b67eb8568cd58bb77082703951679b42cf098actrawick<h3>Adding Buttons to toggle visibility</h3>
0b67eb8568cd58bb77082703951679b42cf098actrawick<p>Finally, we create two buttons, one to show the panel and one to hide it.</p>
fb1985a97912b25ec6564c73e610a31e5fc6e25fcovener<p>The button to close the panel was specified in the instantiation of the panel. The button to open the panel can be defined as:</p>
6502b7b32f980cc2093bb3ebce37e5e4dc68fba4ylavic//Add Panel Show Button
6502b7b32f980cc2093bb3ebce37e5e4dc68fba4ylavicopenBtn.on('click', function(e) {
3060ce7f798fbda7999cd4ddf89b525d2b294185covener showPanel();
e6b4bd1113567627ab6bb6c6a7105e1e01a7d889jailletc<h3>Complete Example Source</h3>
e466c40e1801982602ee0200c9e8b61cc148742djailletc {{>panel-animate-source}}