panel-animate.mustache revision 163214f6685497247d57aa5ea96fb233b3785fcf
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<div class="intro">
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra <p>This example demonstrates how to instantiate a panel and use it in conjunction with the `"transition"` module to create an animated panel.</p>
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra<div class="example newwindow">
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra <a href="panel-animate-example.html" target="_blank" class="button">
163214f6685497247d57aa5ea96fb233b3785fcfTilo Mitra View Example in New Window
8f0dc35284b10842ef7c44ffc3d410227804fcedTilo Mitra<h2>Creating an animated panel</h2>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<h3>Setting Up The YUI Instance</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<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>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<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.
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo MitraYUI({...}).use("panel", "transition", function(Y) {
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra // We'll write example code here
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<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>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<h3>Instantiating the Panel</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<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>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<div id="panelContent">
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra <div class="yui3-widget-hd">
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra Showing an animated panel
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra <div class="yui3-widget-bd">
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra <p>Making panels animate is easy with the "transition" module!</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<p>The JavaScript to instantiate the panel is as follows:</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitravar panel = new Y.Panel({
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra srcNode: "#panelContent",
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra xy: [300, -300], //we render the panel off the page
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra visible:false,
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra value: "Close the panel",
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra action: function(e) {
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra hidePanel();
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra section: "footer"
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<h3>Adding Animation</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<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>
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra<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>
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitrafunction showPanel () {
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra panel.show(); //show the panel to make it visible, then transition it in.
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra duration: 0.5,
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitrafunction hidePanel () {
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra duration: 0.5,
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra top:"-300px"
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra }, function() {
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra panel.hide(); //hide the panel after this transition ends
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<h3>Adding Buttons to toggle visibility</h3>
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra<p>Finally, we create two buttons, one to show the panel and one to hide it.</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<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>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra//Add Panel Show Button
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo MitraopenBtn.on('click', function(e) {
04d20331c4b5af717b17a6d9e70f79dda460a3fcTilo Mitra showPanel();
8f0dc35284b10842ef7c44ffc3d410227804fcedTilo Mitra<h3>Complete Example Source</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra {{>panel-animate-source}}