The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
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.
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.
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.
<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"));
});
});
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 |
All code on this site is licensed under the BSD License unless stated otherwise.