Example: Creating an animated panel

This example demonstrates how to instantiate a panel and use it in conjunction with the "transition" module to create an animated panel.

View Example in New Window

Creating an animated panel

Setting Up The YUI Instance

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.

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.

YUI({...}).use("panel", "transition", function(Y) {
    // We'll write example code here
});

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.

Instantiating the Panel

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.

<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>

The JavaScript to instantiate the panel is as follows:

var panel = new Y.Panel({
  srcNode: "#panelContent",
  width:330,
  xy: [300, -300], //we render the panel off the page
  modal:true,
  visible:false,
  zIndex: 5,
  buttons: [
    {
      value: "Close the panel",
      action: function(e) {
        e.preventDefault();
        hidePanel();
      },
      section: "footer"
    }
  ],
  render:true
});

Adding Animation

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.

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.

function showPanel () {
  panel.show(); //show the panel to make it visible, then transition it in.
  bb.transition({
    duration: 0.5,
    top:"80px"
  });
}

function hidePanel () {
  bb.transition({
    duration: 0.5,
    top:"-300px"
  }, function() {
    panel.hide(); //hide the panel after this transition ends
  });
}

Adding Buttons to toggle visibility

Finally, we create two buttons, one to show the panel and one to hide it.

The button to close the panel was specified in the instantiation of the panel. The button to open the panel can be defined as:

//Add Panel Show Button
openBtn.on('click', function(e) {
  showPanel();
});

Complete Example Source

<style type="text/css">
	.yui3-panel {
outline:none;
}

.yui3-panel #panelContent {
-webkit-box-shadow: 0px 0px 2px black;
-moz-box-shadow: 0px 0px 2px black;
box-shadow: 0px 0px 2px black;
}
.yui3-panel #panelContent .yui3-widget-hd {
font-weight:bold;
padding:5px;

}

#panelContent .yui3-widget-bd {
padding:15px;
background:white;
text-align:center;
}


.yui3-skin-sam .yui3-widget-mask {
background-color: #223460;
opacity: 0.9;
}

</style>

<h2>Creating an animated panel using transitions</h2>
<p>This example shows an animated modal form.
<input type="button" value="Open Panel" id="openButton"></p>
 
<p>Now let's fill this space with some text so that the modality kicks in.</p>

<p>Vestibulum quis purus metus. Quisque in adipiscing erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In vitae lacus tellus, non iaculis arcu. Donec nec risus diam. Vivamus sed mauris eros, nec ultrices nibh. Phasellus scelerisque aliquet mauris, faucibus aliquam ipsum tempor quis. Integer quis risus sed tellus ornare venenatis quis ut magna. Integer erat mauris, hendrerit faucibus iaculis eu, feugiat vitae massa. Aliquam mi augue, tincidunt id porttitor ut, lacinia sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum fringilla urna vel cursus. Etiam et suscipit eros. In ornare lacinia est, sed bibendum ligula blandit nec. Vestibulum tristique pulvinar nunc, quis lacinia eros facilisis vel. Duis tristique porttitor risus, vel laoreet ligula mollis vitae. Nam ornare justo a turpis mattis cursus.</p>

 <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>
<script type="text/javascript">
	YUI().use("transition", "panel", function(Y) {
var openBtn = Y.one('#openButton'),
panel = new Y.Panel({
  srcNode: "#panelContent",
  width:330,
  xy: [300, -300],
  modal:true,
  visible:false,
  zIndex: 5,
  buttons: [
    {
      value: "Close the panel",
      action: function(e) {
        e.preventDefault();
        hidePanel();
      },
      section: "footer"
    }
  ],
  render:true
}),

bb = panel.get('boundingBox');

openBtn.on('click', function(e) {
  showPanel();
});

function showPanel () {
  panel.show();
  bb.transition({
    duration: 0.5,
    top:"80px"
  });
}

function hidePanel () {
  bb.transition({
    duration: 0.5,
    top:"-300px"
  }, function() {
    panel.hide();
  });
}

    
});
</script>