YUI3에서 애니메이션 스크롤을 구현하는 방법은 무엇입니까?

Question

YUI3을 사용하여 애니메이션 스크롤을 만들지 못했습니다.

iOS 관성 스크롤과 호환되어야하며 프로그래밍 방식으로 애니메이션 스크롤을 실행하고 싶습니다. 하지만 나는 문서의 부족으로 인해 YUI3에 대한 올바른 구문을 찾을 수 없습니다.

이

scrollArea._node.scrollLeft = 200; //the element is scrolled! 
    // so the variable is defined correctly and CSS also works! 

2) 다음 코드는 또한 내가) 스크롤을 모방 절대 위치를 사용하고있는 경우 (작동합니다 :

1) 다음 코드는 작동

 animation = new Y.Anim({ 
      node: content, 
      to: { 
       left: -200 
      } 
     }); 
     animation.run(); 

3) 그러나 테 다음을 수행합니다

:하지 : 마크 업처럼 보이는 방법

 animation = new Y.Anim({ 
      node: scrollArea, 
      scroll: { 
       to: { 
        scrollLeft: 200 
       } 
      } 
     }); 
     animation.run(); 

4)는 여기

<div class="scroll-area"> <!-- scrollArea, overflow: scroll --> 
    <ul class="content"> <!-- content --> 
     <li></li><li></li><li></li> 
    </ul> 
</div> 

이 내용이 단지 구문의 문제가되기를 바랍니다. 세 번째 예에서 Here the question is solved for YUI2

Answer 1

는 문제는 YUI2의 스크롤 유틸리티가 작동하는 방법에 대한 유효한 ANIM 생성자에 대한 속성으로 scroll의 사용량 것으로 보인다,하지만 YUI3's Anim 훨씬 더 강력한보다입니다.

두 번째 시도에서 가까와졌습니다. 나는 to attribute에 scrollLeft 필드를 이동 scrollArea 대신 content에 노드를 변경 한

animation = new Y.Anim({ 
     node: scrollArea, 
     to: { 
      scrollLeft: 200 
     } 
    }); 
    animation.run(); 

: 다음은 수정 된 코드입니다. 이 애니메이션 스크롤 작업을 자주 수행하려는 경우 단일 Anim 객체를 다시 사용하는 래퍼 함수를 ​​만드는 것이 좋습니다. 이 example은 재사용을 시연 할 때 유용 할 수 있습니다. 행운을 비네.