ng-animate Example

HTML

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-animate.js"></script>
<div ng-app="animationApp" ng-controller="c1">

  <div ng-if="clicking()" class="box"></div>

</div>

<div ng-click="clicked()">
hello
</div>

CSS

.box {
      width: 40px;
      height: 40px;
      background-color: indianred;
    }
    
    .box.ng-enter {
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease;
      transform: rotateZ(0deg);
    }
    
    .box.ng-enter-active {
      transform: rotateZ(-180deg);
    }
    
    .box.ng-leave {
      -webkit-transition: all 0.35s ease;
      transition: all 0.35s ease;
      transform: rotateZ(-180deg);
    }
    
    .box.ng-leave-active {
      transform: rotateZ(0deg);
    }

JavaScript

angular.module('animationApp', ['ngAnimate'])

    .controller('c1', function ($scope, $animate, $timeout) {
        
        $scope.click = true;
        
        $scope.clicked = function(){
            $scope.click = !$scope.click;
        }
        $scope.clicking = function() {
        
        	return $scope.click;
        }
})

;