CODEWITHSUNDEEP
angularjsangularjs-animation
Elisabeth
Elisabeth

Reputation: 21206

Make a smooth animated css3 rotated div with angularjs

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);    
}

Upvotes: 3

Views: 5928

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

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/

Upvotes: 3

Related Questions