+
+
+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.
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();
+});
+
+
+Complete Example Source
+<div id="demo">
+ <a href="#">x</a>
+</div>
+
+<script type="text/javascript">
+YUI().use('transition', function(Y) {
+ var node = Y.one('#demo');
+
+ node.one('a').on('click', function(e) {
+ e.preventDefault();
+
+ node.transition({
+ duration: 1, // seconds
+ easing: 'ease-out', // CSS syntax
+ height: 0,
+ top: '100px',
+
+ width: {
+ delay: 1,
+ duration: 0.75,
+ easing: 'ease-in',
+ value: 0
+ },
+
+ left: {
+ delay: 1,
+ duration: 0.75,
+ easing: 'ease-in',
+ value: '150px'
+ },
+
+ opacity: {
+ delay: 1.5,
+ duration: 0.75,
+ value: 0
+ }
+ }, function() {
+ node.remove();
+ });
+ });
+});
+
+</script>
+</body>
+</html>
+
+