Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to hide a div with animation using HTML

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 176
    Comment on it

    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-animate
    • ng-hide-animate
    • ng-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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: