JSFiddle - React, Tailwind, and code Playground

by elthrasher

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <div ng-hide="hidden == true" ng-animate="'fade'">
             <h1>Come and get it!</h1>

        </div>
        <button ng-click="hidden=true">I don't want it</button>
        <button ng-click="hidden=false">I want it</button>
    </div>
</div>

CSS

.fade-hide, .fade-show {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.fade-hide {
    opacity:1;
}
.fade-hide.fade-hide-active {
    opacity:0;
}
.fade-show {
    opacity:0;
}
.fade-show.fade-show-active {
    opacity:1;
}

JavaScript

angular.module('myApp', [])
    .controller('AppCtrl', function ($scope) {
    $scope.hidden = false;
});