ngshow should be ng-show
<div class="firstSampleAnimation" ng-show="fadeAnimation">
This element appears when the fadeAnimation model is true
</div>
Solution 1 :
Problem :
I am starting to learn AngularJS and following a coding example from a textbook. The example code should be having an animation effect for the text to fade out, according to the book, but it doesn’t. Does anyone know what should I add or what did I miss? Thank you.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS animation installation</title>
</head>
<body>
<style type="text/css">
.firstSampleAnimation.ng-hide-add,
.firstSampleAnimation.ng-hide-remove {
-webkit-transition: 1s ease-in-out opacity;
transition: 1s ease-in-out opacity;
opacity: 1;
}
.firstSampleAnimation.ng-hide {
opacity: 0;
}
</style>
<div>
<div ng-controller="animationsCtrl">
<h1>ngShow animation</h1>
<button ng-click="fadeAnimation = !fadeAnimation">Toggle fade</button>
fadeAnimation value: {{fadeAnimation}}
<div class="firstSampleAnimation" ngshow="fadeAnimation">
This element appears when the fadeAnimation model is true
</div>
</div>
</div>
<script type="text/javascript" src="./angular-1.7.9/angular.min.js"></script>
<script type="text/javascript" src="./angular-1.7.9/angular-animate.min.js"></script>
<script>
var app = angular.module('myApp', ['ngAnimate']);
app.controller('animationsCtrl', function ($scope) {
$scope.fadeAnimation = false;
});
</script>
</body>
</html>
Comments
Comment posted by Rahul Bhobe
Please use the embedded code snippet tool, to help explain what this code does and does not yet do. And what you what you want it to do.
Comment posted by Ahmad Shahbaz
Please use the code snippet tool, and attached your js files same as angular js