애니메이션 요소 변환 회전

애니메이션 요소 변환 회전

jQuery 로 해야 ?.animate()는 아래 애니메이션하고 만, 저는 아래 라인을 사용하고 있는데, 현재 불투명도를 올바르게 애니메이션화하고 있습니다만, 이것은 CSS3 변환을 지원합니까?

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

기본 애니메이션은 숫자가 아닌 CSS 속성을 애니메이션화할 수 없는 것으로 알고 있습니다.

단계 기능과 사용자 브라우저에 적합한 cs3 변환을 사용하여 이 작업을 수행할 수 있다고 생각합니다.CSS3 변환은 모든 브라우저를 포함하기에는 다소 까다롭습니다(예를 들어, IE6에서는 매트릭스 필터를 사용해야 함).

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

IE9 를 할 수 transform-webkit-transform, 아니면-moz-transform파이어폭스를 지원할 겁니다

하지 않는 CSS 입니다(text-indent를 합니다.

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

라일리의 대답은 훌륭하지만 요소 안에 텍스트가 있습니다.텍스트를 다른 모든 것과 함께 회전시키기 위해 텍스트 들여쓰기 대신 경계 띄우기 속성을 사용했습니다.

또한 요소의 스타일에서 초기값을 설정하여 조금 더 명확하게 설명합니다.

#foo {
    border-spacing: 0px;
}

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

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

저 같은 경우는 시계 반대 방향으로 90도 회전합니다.

라이브 데모입니다.

제 엔 jQuery의animate CSS3 과하게 됩니다.transition, 모든 2D 또는 3D 속성에 이러한 애니메이션을 수행합니다.또한 브라우저에 맡기고 자바스크립트라는 계층을 잊어버림으로써 CPU 주스가 부족해질 수 있다는 점도 우려됩니다. 특히 애니메이션을 사용하고 싶을 때 말이죠.그래서 저는 자바스크립트로 기능을 정의하기 때문에 스타일 정의가 있는 곳에 애니메이션이 있으면 좋겠습니다.프레젠테이션을 자바스크립트에 더 많이 주입하면 할수록 나중에 더 많은 문제에 직면하게 될 것입니다.

하면 됩니다.addClass CSS우,됩니다.transition특성.애니메이션을 "활성화"만 하면 순수 프레젠테이션 레이어에 구현됩니다.

.js

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

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

jQuery가 있는 클래스를 쉽게 제거하거나 라이브러리가 없는 클래스를 쉽게 제거할 수 있습니다.

아, 아.

#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);
}

아, 아.

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

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

다른 스타일링(대체 CSS 속성)을 구현하고 싶을 때도 사용하고 글로벌 .5s 애니메이션으로 스타일을 바로 변경하고 싶을 때도 사용합니다.새로운 클래스를 추가합니다.BODY, 다음과 같은 형태의 대체 CSS를 가지면서.

.js

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

아, 아.

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 에 대한 링크가 있습니다.Tween 시제품의 코드는 여기 Github)에서 확인하실 수 있습니다.

CSS 전환만 사용하면 됩니다.

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

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

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

참고.setTimeout제거하다transition애니메이션이 끝난 후 css 속성(500ms)

---

가독성을 위해 벤더 접두사는 생략했습니다.

이 솔루션을 사용하려면 브라우저의 전환 지원이 필요합니다.

무한 루프 애니메이션을 위해 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');
            } 

언급URL : https://stackoverflow.com/questions/5462275/animate-element-transform-rotate