[JQUERY] 애니메이션 요소 회전 변환

애니메이션 요소 회전 변환

해결법

1. ---

   1.지금까지 내가 아는 한, 기본 애니메이션을 할 수없는 애니메이션 숫자가 아닌 CSS 속성.

   지금까지 내가 아는 한, 기본 애니메이션을 할 수없는 애니메이션 숫자가 아닌 CSS 속성.

   난 당신이 사용자의 브라우저 변환 CSS3 단계 기능과 적절한를 사용하여 수행 얻을 수 있으리라 생각합니다. CSS3 변환은 (IE6는 예를 들어, 매트릭스 필터를 사용해야합니다)는이 모든 당신의 브라우저를 커버하기에 까다로운 비트입니다.

   편집 : 여기 웹킷 브라우저 (크롬, 사파리)에서 작동하는 예이다 : http://jsfiddle.net/ryleyb/ERRmd/

   당신은 IE9 만, 대신의 변환 사용할 수있는 지원을 원하는 경우 -webkit-변환, 또는 파이어 폭스를 지원하는 것 -moz-변환.

   사용 된 트릭은 우리가 회전을 할 수있는 단계 함수에서 그 값을 사용하여 다음에 대한 관심 (텍스트 들여 쓰기)하지 않는 CSS 속성을 애니메이션하는 것입니다 :

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

2. ---

   2.Ryley의 대답은 매우 중요하지만, 나는 요소 내의 텍스트가 있습니다. 다른 모든 것들과 함께 텍스트를 회전하기 위해, 나는 국경 - 간격 속성을 대신 텍스트 들여 쓰기를 사용했다.

   Ryley의 대답은 매우 중요하지만, 나는 요소 내의 텍스트가 있습니다. 다른 모든 것들과 함께 텍스트를 회전하기 위해, 나는 국경 - 간격 속성을 대신 텍스트 들여 쓰기를 사용했다.

   또한, 요소의 스타일에 비트를 명확히하기 위해, 초기 값을 설정합니다 :

   #foo {
       border-spacing: 0px;
   }
   

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

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

   내 경우, 시계 반대 방향으로 90도 회전합니다.

   여기에 라이브 데모입니다.

3. ---

   3.제 생각에는, jQuery의 애니메이션은 2D 또는 3D 재산 등의 애니메이션을 수행하는 CSS3 전환, 비교, 남용 조금이다. 또한 나는 브라우저에 자바 스크립트라는 레이어를 잊고하여 떠나는 것은 여분의 CPU 주스로 이어질 수 있음을 두려워 해요 - 특별히, 당신은 애니메이션 폭발을하고자 할 때. 따라서, 나는 당신이 자바 스크립트 기능을 정의하기 때문에, 스타일 정의는 애니메이션을 좋아합니다. 자바 스크립트에 주입 더 많은 프리젠 테이션, 더 문제는 나중에에 직면 할 것이다.

   제 생각에는, jQuery의 애니메이션은 2D 또는 3D 재산 등의 애니메이션을 수행하는 CSS3 전환, 비교, 남용 조금이다. 또한 나는 브라우저에 자바 스크립트라는 레이어를 잊고하여 떠나는 것은 여분의 CPU 주스로 이어질 수 있음을 두려워 해요 - 특별히, 당신은 애니메이션 폭발을하고자 할 때. 따라서, 나는 당신이 자바 스크립트 기능을 정의하기 때문에, 스타일 정의는 애니메이션을 좋아합니다. 자바 스크립트에 주입 더 많은 프리젠 테이션, 더 문제는 나중에에 직면 할 것이다.

   당신이 할 일은 당신이 CSS 전이 속성을 가진 클래스를 설정 애니메이션,하고자하는 요소에 addClass를 사용하는 것입니다. 당신은 숙박 순수한 프리젠 테이션 계층에 구현 된 애니메이션을 "활성화".

   JS

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

   하나는 쉽게 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 애니메이션으로 온 - 더 - 플라이 스타일을 변경할 수 있습니다. 이런 형태의 대안 CSS를하면서 나는 BODY에 새 클래스를 추가 :

   JS

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

   .CSS

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

   이 방법은 서로 다른 CSS 파일을로드하지 않고, 애니메이션과 다른 스타일을 적용 할 수 있습니다. 당신은 클래스를 설정 자바 스크립트를 포함한다.

4. ---

   4.Ryley와 atonyc의 답변에 추가하려면, 당신은 실제로 텍스트 인덱스 또는 테두리 - 간격처럼 실제 CSS 속성을 사용할 필요가 없습니다, 대신 당신은 회전 또는 내-멋진 재산권과 같은 가짜의 CSS 속성을 지정할 수 있습니다 . 그것은 미래에 실제 CSS 속성되는 위험을 감수하지 않는 사용 뭔가 좋은 생각이 될 수 있습니다.

   Ryley와 atonyc의 답변에 추가하려면, 당신은 실제로 텍스트 인덱스 또는 테두리 - 간격처럼 실제 CSS 속성을 사용할 필요가 없습니다, 대신 당신은 회전 또는 내-멋진 재산권과 같은 가짜의 CSS 속성을 지정할 수 있습니다 . 그것은 미래에 실제 CSS 속성되는 위험을 감수하지 않는 사용 뭔가 좋은 생각이 될 수 있습니다.

   또한, 누군가가 같은 시간에 다른 일을 애니메이션하는 방법을 물었다. 이는 평소처럼 수행하지만, 그렇게처럼, 당신의 재산을 확인해야합니다 있도록 단계 기능이 모든 애니메이션 속성이라고 기억 될 수있다 :

   $('#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를 설명서의 "트윈"개체에 대한 문서를 찾을 수 없으며, 애니메이션 문서 페이지에서 섹션 아무튼 즉 http://api.jquery.com/Types#Tween에 대한 링크가 't은 존재하는 것으로 보인다. 현재 Github에서의 트윈 프로토 타입에 대한 코드를 찾을 수 있습니다).

5. ---

   5.그냥 CSS 전환을 사용합니다 :

   그냥 CSS 전환을 사용합니다 :

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

   예로서, I는 0.5 초에 애니메이션의 지속 기간을 설정.

   애니메이션이 끝난 후 전이 CSS 속성을 제거에서는 setTimeout 주 (MS 500)

   가독성을 위해 I 벤더 접두사를 생략.

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

6. ---

   6.나는 CSS는 무한 루프 애니메이션 jQuery를에 변환 사용을 찾고,이 게시물에 우연히. 이 사람은 나를 위해 벌금을했다. 나는 그것이 비록 얼마나 전문 모른다.

   나는 CSS는 무한 루프 애니메이션 jQuery를에 변환 사용을 찾고,이 게시물에 우연히. 이 사람은 나를 위해 벌금을했다. 나는 그것이 비록 얼마나 전문 모른다.

   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)
   

7. ---

   7.

   //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');
               } 
   

from https://stackoverflow.com/questions/5462275/animate-element-transform-rotate by cc-by-sa and MIT license