JSFiddle - React, Tailwind, and code Playground

by provegard

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<div ng-controller="AnimCtrl" class="theDiv">
    <button ng-click="callFunc()">Click me</button>
    <div ng-hide="bool" class="fade">
      Show and hide me
    </div>
    <button ng-click="bool=!bool">Toggle</button>

    <div ng-if="second">
        <div ng-hide="bool2" class="fade">
          Show and hide me
        </div>
        <button ng-click="bool2=!bool2">Toggle</button>
    </div>
</div>

CSS

.fade.ng-hide {
  transition:0.5s linear all;
  opacity:0;
}

JavaScript

angular
    .module("myApp", ["ngAnimate"])
	.controller("AnimCtrl", function ($animate, $scope) {
    
    	var container = angular.element(".theDiv");
    	["addClass", "removeClass"].forEach(function (event) {
            $animate.on(event, container, function callback(element, phase) {
                console.log("Phase: " + phase);
            });
        });
    
    	$scope.callFunc = function () {
            $scope.second = true;
        	console.log("called");
        };
    })
    ;