Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Overlay Transitions (gallery-overlay-transition) on cdn

Last Updated: 08/26/10

+ 1 -

Patrick Cavit

YUI Contributor

See 4 more by this user.

Created: 08/25/10
Last CDN Push: 07/13/11
Build Tag: gallery-2011.07.13-21-54
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.2
Free for use.

Introduction

This is a port of the example animation plugin to use the new transition module introduced in 3.2.0pr1. This provides hardware-accelerated animation in browsers that support it with built-in fallback support to timer-based animation.

The plugin defaults to changing the opacity of the element from 0 <-> 1, but accepts a hide and show configuration value that correspond to the types of values you would pass into the transition module so in theory you can animate it any way that the transition module supports. The examples page shows a few other possible animations.

Configuration

hide - object representing the values to animate the overlay to when it is hiding
- defaults to setting opacity to 0
show - object representing the values to animate the overlay to when it is showing
- defaults to setting opacity to 1
duration - length of the animation in seconds
- defaults to 0.25 seconds
easing - What easing to use for the transition, supports all easing supported by transition module
- default is "ease-in"

Events

start
end

The plugin is available on the overlay object at the .transitionPlugin key & fires two events, start & end. These correspond to the start/end of a transition & any handlers will be passed a boolean indicating if the overlay was hiding (false) or showing (true) for that particular transition.

Code Sample

<script src="http://yui.yahooapis.com/3.1.2/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.07.13-21-54'
}).use("gallery-overlay-transition", function(Y) {
    var opacityAnim = new Y.Overlay({
        srcNode : "#opacity-overlay",
        //defaults
        plugins : [ Y.Plugin.TransitionOverlay ],
    });
 
    var heightAnim = new Y.Overlay({
        srcNode : "#height-overlay",
        //change height
        plugins : [ { fn : Y.Plugin.TransitionOverlay, cfg : { hide : { height : 0, overflow : "hidden" }, show : { height: "500px" } } } ],
    });
 
    var widthAnim = new Y.Overlay({
        srcNode : "#width-overlay",
        //animate width, longer duration
        plugins : [ { fn : Y.Plugin.TransitionOverlay, cfg : { hide : { width : 0 }, show : { width : "300px" }, duration : 0.5 } } ],
    });
 
    var fontsizeAnim = new Y.Overlay({
        srcNode : "#fontsize-overlay",
        //animate the font size
        plugins : [ { fn : Y.Plugin.TransitionOverlay, cfg : { hide : { fontSize : "0px" }, show : { fontSize : "15px" }, easing : "ease-out" } } ],
    });
 
 
    opacityAnim.transitionPlugin.on("end", function(dir) {
        Y.log("transition ended: " + (dir ? "showing" : "hiding"));
    });
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.07.13-21-54'
}).use("gallery-overlay-transition", function(Y) {
    var opacityAnim = new Y.Overlay({
        srcNode : "#opacity-overlay",
        //defaults
        plugins : [ Y.Plugin.TransitionOverlay ],
    });

var heightAnim = new Y.Overlay({
        srcNode : "#height-overlay",
        //change height
        plugins : [ { fn : Y.Plugin.TransitionOverlay, cfg : { hide : { height : 0, overflow : "hidden" }, show : { height: "500px" } } } ],
    });

var widthAnim = new Y.Overlay({
        srcNode : "#width-overlay",
        //animate width, longer duration
        plugins : [ { fn : Y.Plugin.TransitionOverlay, cfg : { hide : { width : 0 }, show : { width : "300px" }, duration : 0.5 } } ],
    });

var fontsizeAnim = new Y.Overlay({
        srcNode : "#fontsize-overlay",
        //animate the font size
        plugins : [ { fn : Y.Plugin.TransitionOverlay, cfg : { hide : { fontSize : "0px" }, show : { fontSize : "15px" }, easing : "ease-out" } } ],
    });

opacityAnim.transitionPlugin.on("end", function(dir) {
        Y.log("transition ended: " + (dir ? "showing" : "hiding"));
    });
});

Forum Posts

Subject	Author	Date
Not working in 3.3.0	Eike Hirsch	01/7/11
Re: Not working in 3.3.0	Patrick Cavit	01/7/11
Re: Not working in 3.3.0	Patrick Cavit	01/25/11
Re: Not working in 3.3.0	Eike Hirsch	01/25/11
Bug with duration	Darijusch Behbahani	07/7/11
Re: Bug with duration	Patrick Cavit	07/8/11
Re: Bug with duration	Patrick Cavit	07/13/11