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을 사용할 때 좀 더 쉽게 할 수 있습니다. Anim의 인스턴스를 만드는 대신 node.transition()을 호출하고 콜백을 사용할 수 있습니다.

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 그것은 작동