Simple AngularJS Animation

Simple AngularJS Animation

HTML

<script src="http://code.angularjs.org/1.2.1/angular-animate.min.js"></script>
<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <div class="animate-show" ng-show="showButton">
            <button>Empty Button</button>
        </div>
        <input type="checkbox" id="chkBox" ngClick="toggleButton" ng-model="showButton"/>Show Button
    </div>
</body>

CSS

.animate-show {
   -webkit/* -transition:all linear 0.5s;
   transition:all linear 0.5s;
   opacity:1; */
}

JavaScript

// declare a module
var myApp = this.angular.module('myApp', ['ngAnimate']);

// declare a controller
myApp.controller('myCtrl', function ($scope) {
    $scope.showButton = true;
    $scope.toggleButton = function(){
        $scope.showButton = !$scope.showButton;
    }
});