jQuery .animate에서 Modernizr.prefixed 사용

Question

PHP는 제 것이므로 jQuery 구문이 좋지 않습니다.

jQuery 애니메이션을 제작하려하지만 여러 공급 업체의 접두어가 여러 값으로 표시되지만 Modernizr.prefixed의 사용법에 대한 이해는 나를 실망시키고 있습니다.

$('.rightbox3d').animate({ 
     opacity: 1 
     ,top:"60px" 
     ,Modernizr.prefixed('transform'):"translateY(-200px)" 
     ,Modernizr.prefixed('scale'):2 
    }, 4000); 

예 : 나는 얻기 위해 노력하고있어

은 같은 것입니다. 움직이는 스타일 목록에 공급 업체 접두사를 포함하고 싶지만 예기치 않은 토큰 인 구문 오류가 발생합니다.

나는 사용을 시도했다 var transformProperty = Modernizr.prefixed? Modernizr.prefixed ('변환') : '변환'; 하지만 그 중 하나의 스타일을 나열하는 것만 허용합니다. $ (". rightbox3d"). animate (transformProperty, "translateY (-200px)"); 내가 원하는 것은 변형, 불투명도, 눈금 등 여러 스타일입니다.

코드 줄에는 transformProperty 부분에 중괄호가 없지만 목록에는 예를 들어 있습니다. . $ ('. rightbox3d'() {: 1 , 최고 : 불투명도를 "- 200 픽셀" }, 4000, 기능() {. // 애니메이션이 완료 }) 애니메이션;

하지만 난 그냥 내 머리를 얻을 수 없습니다. 누구든지 도와 줄 수 있습니까?

Answer 1

그래서, 당신은 커다란 도약을해야 할 것입니다. CSS 전환은 jQuery.animate와 다릅니다.

다음은 좋은 소개입니다. 그래서 https://www.webkit.org/blog/138/

, 처음의이 예제를 기입하자의 우리는 이제 더 이상

if (!Modernizr.csstransitions || Modernizr.csstransforms3d) { 
    // use some css 
} else { 
    // use some jQuery 
} 

을 같은 일을 할 수 없음을 인식 할 수

if (!Modernizr.csstransitions || !Modernizr.csstransforms3d) { 
    // Old jQuery version 
    $('.rightbox3d').animate({ 
    opacity: 1, 
    top: "-200px", 
    width: 2 * $('.rightbox3d').width(), 
    height: 2 * $('.rightbox3d').height() 
    }, 4000); 
} else { 
    // Modern cool version 
    // The transform is moving/rotating/stretching we want to do 
    // The transition is the animation we want 
    $('.rightbox3d').css({ 
    opacity: 1, 
    transform: 'translateY(-200px) scale(2)', 
    transition: 'all 4000ms ease-in-out' 
    }); 
} 

는 나는 그것을 정리해야한다고 생각 너를 위해서. :)