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.

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. 

<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],
    zIndex : 5,
    modal  : true,
    visible: false,
    render : true,
    buttons: [
        {
            value  : 'Close the panel',
            section: 'footer',
            action : function (e) {
                e.preventDefault();
                hidePanel();
            }
        }
    ]
});

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();
    bb.transition({
        duration: 0.5,
        top     : '80px'
    });
}

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

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

#panelContent.yui3-widget-loading {
    display: none;
}

.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.
<button id="openButton">Open Panel</button>
</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" class="yui3-widget-loading">
    <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, bb;

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

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

    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) {
                    e.preventDefault();
                    hidePanel();
                }
            }
        ]
    });

    bb = panel.get('boundingBox');

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

});

</script>

Examples