Velocity.js 애니메이션 후 기본값 지우기

Question

페이지에 애니메이션으로 표시 할 요소가 있지만 애니메이션이 적용된 후에 클래스에 변경 사항을 적용하여 애니메이션을 CSS로 연기하고 싶습니다. .. Velocity가 style= 태그의 모든 애니메이션 속성을 남겨두고 CSS 전환을 불가능하게한다는 것을 알았습니다. 그것을 할 수있는 더 좋은 방법이 있다면 내가 아래 솔루션,하지만 전체가 불확실 것 같습니다에 CSS를 재설정이

, 궁금 해서요?

// first use CSS to hide the element and squish it 
$el.css({ 
    width: 0, 
    left: "-10px", 
    opacity: 0, 
    marginRight: 0, 
    transition: "none" 
}) 

// now animate the width and margin (do this first 
// so there's a little gap between existing elements 
// before we fade in new element. 
.velocity({ 
    width: width, 
    marginRight: margin 
}, { 
    queue: false, 
    duration: 230 
}) 

// then fade and move in the new element, 
// but this is the iffy bit when it completes 
// I have to unset all the styles I've animated? 
.velocity({ 
    left: 0, 
    opacity: 1 
}, { 
    queue: false, 
    duration: 100, 
    delay: 130, 
    complete: function(els) { 

     $(els).css({ 
      width: "", 
      left: "", 
      opacity: "", 
      marginRight: "", 
      transition: "" 
     });    
    } 
}); 

Answer 1

일반적으로 애니메이션 엔진은 인라인 스타일을 떠나고 싶어 ; 그렇지 않으면 제거시 스타일 시트에 의해 덮어 쓰여질 때 최종 값이 나타납니다.

$(els).attr("style", "");으로 모든 스타일을 지울 수도 있습니다.