用angularjs旋转div的指令

时间:2013-09-21 22:06:51

标签: javascript html css angularjs

我正在尝试使用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,就是这样,但现在我尝试在指令中添加一个计时器,但我不知道如何做到这一点。有没有办法让它只在指令中工作,或者我必须在控制器中添加一些东西?谢谢你的帮助,丹尼尔!

2 个答案:

答案 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();
    }
});

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

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