使用angularjs旋轉div的指令

我正在嘗試使角度指令旋轉div無限。比方說，我有這個網站使用angularjs旋轉div的指令

<div class="card" pendulum></div>

我創造了這樣的指令來改變旋轉

pdany.directive('pendulum', function() { 
     return function(scope, elem, attr) { 
      elem.css({ 
        '-moz-transform': 'rotate(90deg)', 
        '-webkit-transform': 'rotate(90deg)', 
        '-o-transform': 'rotate(90deg)', 
        '-ms-transform': 'rotate(90deg)' 
       }); 
     } 
    });

但這個指令改變了旋轉的CSS，就是這樣，但現在我嘗試裏面添加一個計時器該指令，但我不知道該怎麼做。有沒有辦法讓它只在指令中工作，或者我也必須在控制器中添加一些東西？謝謝你的幫助，丹尼爾！

來源

2013-09-21 Pacuraru Daniel

您應該使用css3動畫。

例如，你應該在你的樣式表

@-webkit-keyframes rotate360{ 
    from { 
     -webkit-transform:rotate(0deg); 
    } 
    to { 
     -webkit-transform:rotate(360deg); 
    } 
} 
@-moz-keyframes rotate360{ 
    from { 
     -moz-transform:rotate(0deg); 
    } 
    to { 
     -moz-transform:rotate(360deg); 
    } 
} 
@-ms-keyframes rotate360{ 
    from { 
     -ms-transform:rotate(0deg); 
    } 
    to { 
     -ms-transform:rotate(360deg); 
    } 
} 
@-o-keyframes rotate360{ 
    from { 
     -o-transform:rotate(0deg); 
    } 
    to { 
     -o-transform:rotate(360deg); 
    } 
} 
@keyframes rotate360{ 
    from { 
     transform:rotate(0deg); 
    } 
    to { 
     transform:rotate(360deg); 
    } 
}

，並在您elem.css

elem.css({ 
    'animation':'rotate360 1s linear 0s infinite', 
    '-webkit-animation':'rotate360 1s linear 0s infinite', 
    '-moz-animation':'rotate360 1s linear 0s infinite', 
    '-ms-animation':'rotate360 1s linear 0s infinite', 
    '-o-animation':'rotate360 1s linear 0s infinite' 
});

來源

2013-09-21 22:49:08 fernandopasik

以及我想提高我的代碼，並添加一個鐘擺運動，這就是爲什麼我需要JS來處理運動，這樣我就可以添加更復雜的運動模式 –

你試過具有值**備選**的動畫方向屬性？更多的信息在這裏： https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction – fernandopasik

不知道你怎麼想旋轉我只能建議以下的元素。

pdany.directive('pendulum', function() { 
    return function($scope, $element, $attributes) { 
     var degrees = 360; 

     $element.css('transition', '-webkit-transform 800ms ease'); 

     var rotate = function() { 
      $element.css('-webkit-transform', 'rotate(' + degrees + 'deg)'); 
      degrees += 360; 
      setTimeout(rotate, 1000); 
     }; 

     rotate(); 
    } 
});

演示：http://jsfiddle.net/kWvp6/3/

來源

2013-09-22 01:55:21 iConnor

使用angularjs旋轉div的指令

回答

相關問題