我正在尝试使用angular制作一个指令,以旋转div无限。假设我得到了这个HTML
<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,就是这样,但现在我尝试在指令中添加一个计时器,但我不知道如何做到这一点。有没有办法让它只在指令中工作,或者我必须在控制器中添加一些东西?谢谢你的帮助,丹尼尔!
答案 0 :(得分:3)
在不知道你想要如何旋转元素的情况下,我只能建议以下内容。
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();
}
});
答案 1 :(得分:2)
你应该使用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'
});