3

Thats my fiddle:

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

The rotation of the div is rather a flip... not a smooth rotation.

I use the latest version of 

angularjs 1.2 rc3.

Considering the new animate capabilities of the latest angularjs how do I have to integrate

the animation of the rotation?

<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);    
}
Elisabeth
  • 20,496
  • 52
  • 200
  • 321

1 Answers1

3

You are asking about AngularJS 1.2.0-rc3, but you are using AngularJS v1.0.3 in your example. Which one are you asking about?

For your example, just add transition to the CSS and it will work:

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

Fiddle: http://jsfiddle.net/7XQr9/

tasseKATT
  • 38,470
  • 8
  • 84
  • 65
  • Thanks I got totally confused with the ng-animate which seems now totally unappropriate for this task. I have the older angularjs referenced on jsfiddle because jsfiddle does not offer 1.2rc3 as cdn. – Elisabeth Nov 07 '13 at 20:52