panel-animate.mustache revision 8f0dc35284b10842ef7c44ffc3d410227804fced
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>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<div class="example">
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra <style type="text/css">
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra {{>panel-animate-css-source}}
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra {{>panel-animate-html-source}}
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra <script type="text/javascript">
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra {{>panel-animate-js-source}}
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",
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra centered:true,
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra visible:false,
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra //Add a footer button to close the panel
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra value:"Close Panel",
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra action: function(e) {
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra section: "footer"
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<p>The following CSS properties are set on the panel's bounding-box after it's rendered.</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitravar bb = panel.get('boundingBox');
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra "-webkit-transform": "scale(0)",
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra "-moz-transform": "scale(0)",
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra "transform": "scale(0)"
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>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<p>The `toggleAnimation()` function below defines the transitions to animate the panel.</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitrafunction toggleAnimation (e) {
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra //If the panel is shown, pop in with these properties
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra duration: 0.3,
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra "-webkit-transform": "scale(1)",
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra "-moz-transform": "scale(1)",
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra "transform": "scale(1)"
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra //If the panel is hidden, pop out with these properties
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra duration: 0.3,
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra "-webkit-transform": "scale(0)",
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra "-moz-transform": "scale(0)",
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra "transform": "scale(0)"
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<h3>Adding Buttons to toggle visibility</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<p>The `toggleAnimation()` function above will need to be called whenever the visibility of the panel changes. To do this, 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) {
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra<p>Finally, We set the `toggleAnimation()` method to be called whenever the visibility changes.</p>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitrapanel.on('visibleChange', toggleAnimation);
8f0dc35284b10842ef7c44ffc3d410227804fcedTilo Mitra<h3>Complete Example Source</h3>
3506bb474b8013d61e36019986064fd9fb8fa9fbTilo Mitra {{>panel-animate-source}}