아우 모달을 사용하여 페이드 인/아웃 모달

Question

저는 YUI와 alloyUI 구성 요소를 사용하고 있습니다. 이 작업은 정상적으로 수행되지만 열면보기가 바래다가 닫히면 점점 더 멋지게됩니다. 아무도 내가 이것을 어떻게 달성 할 수 있는지 안다? Jquery twitter Bootstrap 모달과 비슷한 방식으로 open 및 slideOut을 닫으면 좋겠지 만 더 좋을 것입니다. 여기에 내 코드 :

<div id="modal"></div> 

YUI().use('aui-modal', function(Y) { 
var modal = new Y.Modal(
    { 
    bodyContent: 'Modal body', 
    centered: true, 
    headerContent: '<h3>Modal header</h3>', 
    modal: true, 
    render: '#modal' 
    } 
).render(); 
}); 

Answer 1

쉽게 fadeIn/페이드 아웃 애니메이션의 경우, 당신은 단순히 당신의 모달 인스턴스에 WidgetAnim 플러그인을 연결할 수 있습니다. 기본적으로 0.2 초의 지속 시간으로 모달을 페이드 인/페이드 아웃합니다.

<div id="modal"></div> 

YUI().use('aui-modal', 'widget-anim', function(Y) { 
    var modal = new Y.Modal(
     { 
      bodyContent: 'Modal body', 
      centered: true, 
      headerContent: '<h3>Modal header</h3>', 
      modal: true, 
      render: '#modal' 
     } 
    ).render(); 

    modal.plug(Y.Plugin.WidgetAnim); 
}); 

또한, 당신은 animShow 및 animHide 속성을 사용하여 기본 페이드 애니메이션을 변경할 수 있습니다 (이에 대한 'ANIM'모듈을해야한다는 점에 유의) :

modal.plug(
     Y.Plugin.WidgetAnim, 
     { 
      duration: 0.5, 
      animHide: new Y.Anim(
       { 
        duration: 0.5, 
        easing: Y.Easing.easeIn, 
        node: modal.get('boundingBox'), 
        to: { xy: [modal.get('boundingBox').getXY()[0], -500] } 
       } 
      ), 
      animShow: new Y.Anim(
       { 
        duration: 0.5, 
        easing: Y.Easing.elasticOut, 
        from: { xy: [modal.get('boundingBox').getXY()[0], -500] }, 
        node: modal.get('boundingBox'), 
        to: { xy: modal.get('boundingBox').getXY() } 
       } 
      ) 
     } 
    );