Hello Reader's if you are making the hide and show events in your website with animations effects, Then this blog is very helpfull to you.
So lets start, Suppose there is div you want it to be hide everytime a user hits a hide checkbox. We will use some part of Angular JS to making the ID of the div. And its code will go like this:-
<div ng-hide="myCheck"></div>
Remember the ngAnimate module is used to append or remove the classes. Once the ngAnimate will comes in action simply it will auto get the css of the class to the elements attached with it. But it'will not make any animation type effect directly to HTML element, ngAnimate will listen to the actions.
Now we will make some our own css, and it's code will go like this:-
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
And finally you can add the CDN of angular JS and put the HTML code as below:-
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<body ng-app="ngAnimate">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>
</html>
Every developer you keep in mind in addition to animation effects, the HTML element will act as they having the class property, but once the animation is removed all those property will be lost. Example: the ng-hide directive can add following properties:
ng-animateng-hide-animateng-hide-add (if the element will be hidden)ng-hide-remove (if the element will be showed)ng-hide-add-active (if the element will be hidden)ng-hide-remove-active (if the element will be showed)
This code run perfect and worked fine to me.
0 Comment(s)