transition()

Type : public method

Support : 0.6

Return : -

  • 대상개체의 CSS3 transition을 적용한다.
  • 대상의 해당 style property 가 설정되어 있지 않으면 transition 이 제대로 적용되지 않을 수 있다.
    ~IE9 는 지원하지 않는다.
    호출시 대상개체의 등록된 "transitionend" 이벤트는 모두 해제시키고 하나의 이벤트만 등록된다.
    ※ IE와 iOS에서는 해당노드가 화면에서 사라지면(display:none;) transition을 pause시키고 transitionend 이벤트도 보류된다.
    onTransitonEnd 이벤트는 출발값과 도착값이 같으면 발생하지 않는다.
    Ease값 조절: CSS3 Ease Generator

Methods

  • transition( tStyle, tValue, dispatch, data ) : voidver 0.6~

    • tStyle : String
      taransition style, ex) "left:220px"
    • tValue : String
      taransition value, ex) "left 0.6s ease"
    • dispatch : Object
      dispatch되는 Event들 onTransitionEnd: Function
      Event Properties : type, target, data
    • data : *
      transitionend 이벤트 핸들러에서 전달받을 data, ex) e.data

Example

//대상개체 Transition
$B( '.slider' ).transition( 'left:90%', 'left 0.6s ease' );

//대상개체 Transition, 완료이벤트 받기
$B( '.slider' ).transition( 'left:90%', 'left 0.6s ease', {onTransitionEnd: function (e) {
    console.log( e.type );//transitonend
}} );

//대상개체 Transition 중지후 리셋
$B( '.slider' ).transition( 'none' );

//대상개체 Transition 중지후 리셋, 스타일은 적용.
$B( '.slider' ).transition( 'left:200px', 'none' );