anonymoussc · July 27, 2015 06:01
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html ng-app="myApp">

 <head>
    <title>AngularJS ngIf fade animation</title>
    <link href="style.css" rel="stylesheet"/>
 </head>

 <body>
    <div ng-controller="animationsCtrl">
        <div>
            fadeAnimation value: {{fadeAnimation}}
        </div>
        <button ng-click="fadeAnimation = !fadeAnimation">Toggle fade</button>
        <div ng-if="fadeAnimation" class="animationIf">
            This element appears when the fadeAnimation model is true
        </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>
diff --git a/script.js b/script.js
 var app = angular.module('myApp', ['ngAnimate']);

 app.controller('animationsCtrl', function ($scope) {
    $scope.fadeAnimation = false;
 });
diff --git a/style.css b/style.css
 /* ngIf animation */
 .animationIf.ng-enter,
 .animationIf.ng-leave {
    -webkit-transition : opacity ease-in-out 1s;
    -moz-transition    : opacity ease-in-out 1s;
    -ms-transition     : opacity ease-in-out 1s;
    -o-transition      : opacity ease-in-out 1s;
    transition         : opacity ease-in-out 1s;
 }

 .animationIf.ng-enter,
 .animationIf.ng-leave.ng-leave-active {
    opacity : 0;
 }

 .animationIf.ng-leave,
 .animationIf.ng-enter.ng-enter-active {
    opacity : 1;
 }
	<!DOCTYPE html>
	<html ng-app="myApp">

	<head>
	<title>AngularJS ngIf fade animation</title>
	<link href="style.css" rel="stylesheet"/>
	</head>

	<body>
	<div ng-controller="animationsCtrl">
	<div>
	fadeAnimation value: {{fadeAnimation}}
	</div>
	<button ng-click="fadeAnimation = !fadeAnimation">Toggle fade</button>
	<div ng-if="fadeAnimation" class="animationIf">
	This element appears when the fadeAnimation model is true
	</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;
	});
	/* ngIf animation */
	.animationIf.ng-enter,
	.animationIf.ng-leave {
	-webkit-transition : opacity ease-in-out 1s;
	-moz-transition : opacity ease-in-out 1s;
	-ms-transition : opacity ease-in-out 1s;
	-o-transition : opacity ease-in-out 1s;
	transition : opacity ease-in-out 1s;
	}

	.animationIf.ng-enter,
	.animationIf.ng-leave.ng-leave-active {
	opacity : 0;
	}

	.animationIf.ng-leave,
	.animationIf.ng-enter.ng-enter-active {
	opacity : 1;
	}