Question

这是我的小提琴：

http://jsfiddle.net/7kLde/48/

div的旋转相当于翻转......不是平滑的旋转。

我使用最新版本的

angularjs 1.2 rc3.

考虑到最新angularjs的新动画功能，我如何整合

旋转动画？

<div ng-controller="Main">
    <button ng-click="rotate()">Toggle</button>
    <div style="width:100px;margin:10%;background:red;" ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]">I am rotated!</div>
</div>

var app = angular.module('myApp', []);    
function Main($scope) {
    $scope.isActive = false;

    $scope.rotate = function () {
        $scope.isActive = !$scope.isActive;
    };
}

.rotate {
   -webkit-transform: rotate(90deg);  
}
.rotateCounterwise {
    -webkit-transform: rotate(0deg);    
}

Answer 1

您正在询问AngularJS 1.2.0-rc3，但您在示例中使用的是AngularJS v1.0.3。你问哪一个？

对于您的示例，只需向CSS添加转换即可：

.rotate, 
.rotateCounterwise {
    -webkit-transition: 300ms ease all;
    -moz-transition: 300ms ease all;
    -o-transition: 300ms ease all;
    transition: 300ms ease all;
}

小提琴：http://jsfiddle.net/7XQr9/

使用angularjs制作一个平滑的动画css3旋转div

1 个答案: