##AngularJS ngShow fade animation
In the CSS code, we declared an opacity transition to elements with the firstAnimationSample and ng-hide-add classes, or elements with the firstAnimationSample and ng-hide-remove classes.
We also added the firstAnimationSample class to the same element that has the ng-show directive attribute.
| <!DOCTYPE html> | |
| <html ng-app="myApp"> | |
| <head> | |
| <title>AngularJS ngShow fade animation</title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div> | |
| <div ng-controller="animationsCtrl"> | |
| <button ng-click="fadeAnimation = !fadeAnimation">Toggle fade</button> | |
| fadeAnimation value: {{fadeAnimation}} | |
| <div class="firstSampleAnimation" ng-show="fadeAnimation"> | |
| This element appears when the fadeAnimation model is true | |
| </div> | |
| </div> | |
| </div> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
| var app = angular.module('myApp', ['ngAnimate']); | |
| app.controller('animationsCtrl', function ($scope) { | |
| $scope.fadeAnimation = false; | |
| }); |
| .firstSampleAnimation.ng-hide-add, | |
| .firstSampleAnimation.ng-hide-remove { | |
| -webkit-transition : 1s ease-in-out opacity; | |
| -moz-transition : 1s ease-in-out opacity; | |
| -ms-transition : 1s ease-in-out opacity; | |
| -o-transition : 1s ease-in-out opacity; | |
| transition : 1s ease-in-out opacity; | |
| opacity : 1; | |
| } | |
| .firstSampleAnimation.ng-hide { | |
| opacity : 0; | |
| } |