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.
Separate Transition Properties
Each transition property can optionally have its own duration, delay, and/or easing.
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.
Y.one('#demo').on('transition:end', function(e) { node.destroy(true); });
