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

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/