angular - $animate.enabled

by Robert Mirro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.js"></script>

<div ng-app="theApp" ng-controller="theController as vm">
  <h3>Invoke flyout: <input type="checkbox" ng-model="vm.flyoutIsInvoked"></h3>
  <div ng-animate-enabled="true">
    <div class="flyout ngif" ng-if="vm.flyoutIsInvoked">ng-if</div>
    <div class="flyout ngshow" ng-show="vm.flyoutIsInvoked">ng-show</div>
  </div>
</div>

CSS

.flyout {
  height: 100px;
  width: 100px;
  position: absolute;
  left: 0px;
  text-align: center;
}

.ngif {
  background-color: lightblue;  
  top: 60px;
}
.ngshow {
  background-color: lightcoral;  
  top: 180px;
}

.ng-enter, .ng-leave, 
.ng-hide-add, .ng-hide-remove {
  transition: all linear 0.5s;
}
.ng-enter, .ng-leave.ng-leave-active,
.ng-hide-remove, .ng-hide-add.ng-hide-add-active {
  left: -100px;
}
.ng-leave, .ng-enter.ng-enter-active,
.ng-hide-add, .ng-hide-remove.ng-hide-remove-active {
  left: 0px;
}

JavaScript

(function() {
  console.clear();

  angular
    .module('theApp', ['ngAnimate'])
    .controller('theController', TheController)
    .directive('ngAnimateEnabled', NgAnimateEnabled);

	function TheController($animate) {
  	this.flyoutIsInvoked = false;
    $animate.enabled(true);  // globally enable/disable ng-animate
    console.log('$animate.enabled:', $animate.enabled());
  }

	function NgAnimateEnabled($animate) {
    return {
      restrict: 'A',
      priority: 601,
      link: function($scope, $element, $attributes) {
        $animate.enabled($element, $scope.$eval($attributes.ngAnimateEnabled));
        console.log('$animate enabled:', $animate.enabled($element), $element);
      }
    };
  }
})();