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-click="click=!click" ng-if="click" class="box"></div>

</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 = false;

})

;