YUI動畫鏈接

Question

<div id="demo" class="yui3-module"> 
<a href="" title="fade out element" class="yui3-remove">Click to animate</a> 
</div> 
<script src="js/yui-min.js"></script> 
<script type="text/javascript"> 
YUI().use('anim', function(Y) { 
var anim = new Y.Anim({ 
    node: '#demo', 
    to: { width: 500, height: 300 } 
}); 
var anim2 = new Y.Anim({ 
    node: '#demo', 
    to: { width: 100, height: 100 } 
}); 

var onClick = function(e) { 
    e.preventDefault(); 
    anim.run(); 
anim2.run(); //how to run anim2 ??? 
}; 
Y.one('#demo .yui3-remove').on('click', onClick); 
}); 

如何在anim.run之後運行下一個anim2，例如作爲鏈。 有沒有簡單的方法來做到這一點。 ??

Answer 1

您可以通過聆聽第一個人的end事件來運行動畫。

anim.on('end', function() { 
    anim2.run(); 
}); 

這是更簡單。使用Transition時候做了一下。您可以調用node.transition()並使用回調來代替創建Anim的實例。

YUI().use('node', 'transition', function (Y) { 
    Y.one('#demo .yui3-remove').on('click', function (e) { 
    e.preventDefault(); 
    Y.one('#demo').transition({ width: 500, height: 300 }, function() { 
     this.transition({ width: 100, height: 100 }); 
    }); 
    }); 
}); 

Answer 2

有一個畫廊模塊來爲你做這個：http://yuilibrary.com/gallery/show/anim-sequence