panel-animate.mustache revision b314fc1188609ac757efdb7f61cc5882a070a5e7
<div class="intro">
<p>
This example demonstrates how to instantiate a panel and use it in conjunction with the `"transition"` module to create an animated panel.
</p>
</div>
<div class="example newwindow">
<a href="panel-animate-example.html" target="_blank" class="button">
View Example in New Window
</a>
</div>
<h2>Creating an animated panel</h2>
<h3>Setting Up The YUI Instance</h3>
<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>
<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.
</p>
```javascript
YUI().use('panel', 'transition', function (Y) {
// We'll write example code here
});
```
<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>
<h3>Instantiating the Panel</h3>
<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>
```html
<div id="panelContent">
<div class="yui3-widget-hd">
Showing an animated panel
</div>
<div class="yui3-widget-bd">
<p>Making panels animate is easy with the "transition" module!</p>
</div>
</div>
```
<p>The JavaScript to instantiate the panel is as follows:</p>
```javascript
var panel = new Y.Panel({
srcNode: '#panelContent',
width : 330,
xy : [300, -300],
zIndex : 5,
modal : true,
visible: false,
render : true,
buttons: [
{
value : 'Close the panel',
section: 'footer',
action : function (e) {
hidePanel();
}
}
]
});
```
<h3>Adding Animation</h3>
<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>
<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>
```javascript
function showPanel() {
panel.show();
duration: 0.5,
top : '80px'
});
}
function hidePanel() {
duration: 0.5,
top : '-300px'
}, function () {
panel.hide();
});
}
```
<h3>Adding Buttons to toggle visibility</h3>
<p>
Finally, we create two buttons, one to show the panel and one to hide it.
</p>
<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>
```javascript
// Add Panel show button.
openBtn.on('click', function (e) {
showPanel();
});
```
<h3>Complete Example Source</h3>
```
{{>panel-animate-source}}
```