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.

x

Separate Transition Properties

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

An optional callback can be passed as the second argument to transition(). The callback is run after all property transitions have completed. In this case, we will use it to remove the node from the document.

  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. }, function() {
  27. this.remove();
  28. });
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
    }
}, function() {
    this.remove();
});

Copyright © 2011 Yahoo! Inc. All rights reserved.

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