Example: Creating an Animated Panel

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.

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.

Note: be sure to add the yui3-skin-sam classname to the
page's <body> element or to a parent element of the widget in order to apply
the default CSS skin. See Understanding Skinning.

<body class="yui3-skin-sam"> <!-- You need this skin class -->

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.

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.