YUI 3.x Home -

YUI Library Examples: Transition: Using Node Transitions

Transition: Using Node Transitions

CSS properties can be transitioned with a delay, allowing for the creation of more advanced effects. Click the X to run the animation.

View example in new window.

x

Separate Transition Properties

Each transition property can optionally have its own duration, delay, and/or easing.

  1. Y.one('#demo').transition({
  2.     duration: 1, // seconds
  3.     easing: 'ease-out', // CSS syntax
  4.     height: 0,
  5.     top: '100px',
  6.  
  7.     width: {
  8.         delay: 1,
  9.         duration: 0.5,
  10.         easing: 'ease-in',
  11.         value: 0
  12.     },
  13.  
  14.     left: {
  15.         delay: 1,
  16.         duration: 0.5,
  17.         easing: 'ease-in',
  18.         value: '150px'
  19.     },
  20.  
  21.     opacity: {
  22.         delay: 1.5,
  23.         duration: 0.25,
  24.         value: 0
  25.     }
  26. }
Y.one('#demo').transition({
    duration: 1, // seconds
    easing: 'ease-out', // CSS syntax
    height: 0,
    top: '100px',
 
    width: {
        delay: 1,
        duration: 0.5,
        easing: 'ease-in',
        value: 0
    },
 
    left: {
        delay: 1,
        duration: 0.5,
        easing: 'ease-in',
        value: '150px'
    },
 
    opacity: {
        delay: 1.5,
        duration: 0.25,
        value: 0
    }
}

The transition:end Event

When the transition method is called, the transition:end event is fired after all property transitions have completed.

  1. Y.one('#demo').on('transition:end', function(e) {
  2.     node.destroy(true); 
  3. });
Y.one('#demo').on('transition:end', function(e) {
    node.destroy(true); 
});

More Transition Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings