JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<div disable-animations>
    <div enable-animations>
        <button ng-click="toggle=!toggle">Toggle</button>
        <span class="log-animations" ng-if="toggle">Here!</span>
    </div>
</div>

JavaScript

var app = angular.module('app', ['ngAnimate']);

app.directive('disableAnimations', function($animate) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            $animate.enabled(element, false);
        }
    };
});

app.directive('enableAnimations', function($animate) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            $animate.enabled(element, true);
        }
    };
});

app.animation('.log-animations', function() {
    return {
        enter: function(element, done) {
      		console.log('enter', element);
      		done();
    	},

    	leave: function(element, done) {
      		console.log('leave', element);
            done();
    	}
  	};
});