YUI 3.x Home -

YUI Library Examples: Transition: Basic Node Transitions

Transition: Basic Node Transitions

The transition method animates the value of each property from the current value to the given value. Click the X to run the animation.

View example in new window.

x

Using the Transition Method

Transition allows you to animate one or more properties from their current value to a given value with the specified duration and easing method.

  1. <script>
  2. YUI().use('transition', function(Y) {
  3.     Y.one('#demo').transition({
  4.         duration: 1, // seconds
  5.         easing: 'ease-out',
  6.         height: 0,
  7.         width: 0,
  8.         left: '150px',
  9.         top: '100px',
  10.         opacity: 0
  11.     });
  12. });
  13. </script>
<script>
YUI().use('transition', function(Y) {
    Y.one('#demo').transition({
        duration: 1, // seconds
        easing: 'ease-out',
        height: 0,
        width: 0,
        left: '150px',
        top: '100px',
        opacity: 0
    });
});
</script>

Transition with Callback

The transition method provides an optional callback argument, which is a function that runs once the transition is completed. The callback runs only for this transition.

  1. <script>
  2.     var node = Y.one('#demo');
  3.  
  4.     node.transition({
  5.         duration: 1, // seconds
  6.         easing: 'ease-out',
  7.         height: 0,
  8.         width: 0,
  9.         left: '150px',
  10.         top: '100px',
  11.         opacity: 0
  12.     }, function() {
  13.         this.remove(); 
  14.     });
<script>
    var node = Y.one('#demo');
 
    node.transition({
        duration: 1, // seconds
        easing: 'ease-out',
        height: 0,
        width: 0,
        left: '150px',
        top: '100px',
        opacity: 0
    }, function() {
        this.remove(); 
    });

More Transition Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

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