요소 변형 회전 애니메이션

jQuery를 사용하여 요소를 어떻게 회전 .animate()합니까? 현재 불투명도를 올바르게 애니메이션하는 아래 줄을 사용하고 있지만 CSS3 변환을 지원합니까?

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});

내가 아는 한 기본 애니메이션은 숫자가 아닌 CSS 속성에 애니메이션을 적용 할 수 없습니다.

단계 함수와 사용자 브라우저에 적합한 css3 변환을 사용하여이 작업을 수행 할 수 있다고 생각 합니다. CSS3 변환은 모든 브라우저를 다루기에는 약간 까다 롭습니다 (예를 들어 IE6에서는 Matrix 필터를 사용해야 함).

편집 : 다음은 웹킷 브라우저 (Chrome, Safari)에서 작동하는 예입니다. http://jsfiddle.net/ryleyb/ERRmd/

IE9 만 지원하려는 경우 transform대신을 사용 -webkit-transform하거나 -moz-transformFireFox를 지원할 수 있습니다 .

사용되는 트릭은 우리가 신경 쓰지 않는 CSS 속성 ( text-indent) 에 애니메이션을 적용한 다음 단계 함수에서 해당 값을 사용하여 회전을 수행하는 것입니다.

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...

Ryley의 대답 은 훌륭하지만 요소 내에 텍스트가 있습니다. 다른 모든 것과 함께 텍스트를 회전하기 위해 텍스트 들여 쓰기 대신 border-spacing 속성을 사용했습니다.

또한 요소의 스타일에서 약간을 명확히하기 위해 초기 값을 설정합니다.

#foo {
    border-spacing: 0px;
}

그런 다음 애니메이션 청크에서 최종 값 :

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'
},'linear');

제 경우에는 시계 반대 방향으로 90도 회전합니다.

다음은 라이브 데모 입니다.

제 생각에 jQuery animate는 transition2D 또는 3D 속성에서 이러한 애니메이션을 수행 하는 CSS3에 비해 약간 과도하게 사용 됩니다. 또한 브라우저에 남겨두고 JavaScript라는 레이어를 잊어 버리면 특히 애니메이션을 사용하고 싶을 때 여분의 CPU 주스로 이어질 수 있습니다 . 따라서 JavaScript로 기능을 정의하기 때문에 스타일 정의가있는 애니메이션을 좋아합니다 . JavaScript에 더 많은 프레젠테이션을 삽입할수록 나중에 더 많은 문제에 직면하게됩니다.

addClass애니메이션을 적용하려는 요소 를 사용 하기 만하면 CSS transition속성 이있는 클래스를 설정할 수 있습니다. 당신은 단지 애니메이션 "활성화" 숙박은, 순수한 프리젠 테이션 계층에서 구현을 .

.js

// with jQuery
$("#element").addClass("Animate");

// without jQuery library
document.getElementById("element").className += "Animate";

하나는 easly 수 와 jQuery 클래스를 제거 하거나 라이브러리없이 클래스를 제거합니다 .

.css

#element{
    color      : white;
}

#element.Animate{
    transition        : .4s linear;
    color             : red;
    /** 
     * Not that ugly as the JavaScript approach.
     * Easy to maintain, the most portable solution.
     */
    -webkit-transform : rotate(90deg);
}

.html

<span id="element">
    Text
</span>

이것은 대부분의 사용 사례에 빠르고 편리한 솔루션입니다.

또한 다른 스타일 (대체 CSS 속성)을 구현하고 글로벌 .5s 애니메이션으로 즉석에서 스타일을 변경하고 싶을 때 이것을 사용합니다. 다음 BODY과 같은 형식으로 대체 CSS를 사용하면서에 새 클래스를 추가합니다 .

.js

$("BODY").addClass("Alternative");

.css

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

이렇게하면 다른 CSS 파일을로드하지 않고도 애니메이션에 다른 스타일을 적용 할 수 있습니다. 당신은 class.

Ryley와 atonyc의 답변에 추가하려면, 당신은 실제로 같은 실제 CSS 속성을 사용할 필요가 없습니다 text-index거나 border-spacing, 대신 당신은 같은 가짜의 CSS 속성을 지정할 수 있습니다 rotation또는 my-awesome-property. 나중에 실제 CSS 속성이 될 위험이없는 것을 사용하는 것이 좋습니다.

또한 누군가는 동시에 다른 것을 애니메이션하는 방법을 물었습니다. 이 작업은 평소와 같이 수행 할 수 있지만 step모든 애니메이션 속성에 대해 함수가 호출되므로 다음과 같이 속성을 확인해야합니다.

$('#foo').animate(
    {
        opacity: 0.5,
        width: "100px",
        height: "100px",
        myRotationProperty: 45
    },
    {
        step: function(now, tween) {
            if (tween.prop === "myRotationProperty") {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                // add Opera, MS etc. variants
                $(this).css('transform','rotate('+now+'deg)');  
            }
        }
    });

(참고 : jQuery 문서에서 "Tween"개체에 대한 문서를 찾을 수 없습니다. 애니메이션 문서 페이지 에는 http://api.jquery.com/Types#Tween에 대한 링크 가 있습니다. 존재하지 않는 것 같습니다. 여기 Github 에서 Tween 프로토 타입에 대한 코드를 찾을 수 있습니다 ).

CSS 전환을 사용하십시오.

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

예를 들어 애니메이션 기간을 0.5 초로 설정했습니다.

애니메이션이 끝난 후 (500ms) css 속성 setTimeout을 제거하려면 주의하십시오.transition

가독성을 위해 공급 업체 접두사를 생략했습니다.

이 솔루션은 브라우저의 전환 지원이 필요합니다.

무한 루프 애니메이션을 위해 jQuery에서 CSS 변환을 사용하려는이 게시물을 우연히 발견했습니다. 이것은 나를 위해 잘 작동했습니다. 그래도 얼마나 전문적인지 모르겠습니다.

function progressAnim(e) {
    var ang = 0;

    setInterval(function () {
        ang += 3;
        e.css({'transition': 'all 0.01s linear',
        'transform': 'rotate(' + ang + 'deg)'});
    }, 10);
}

사용 예 :

var animated = $('#elem');
progressAnim(animated)

//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow

            function twistMyElem(){
                var ball = $('#form');
                document.getElementById('form').style.zIndex = 1;
                ball.animate({ zIndex : 360},{
                    step: function(now,fx){
                        ball.css("transform","rotateY(" + now + "deg)");
                    },duration:3000
                }, 'linear');
            }