Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted February 16th, 2016
AngularJS animations

I’ve been looking through some animations of AngularJS and CSS. I’ve found out that AngularJS, compared to CSS, has way more options to navigate through your animation and makes it easier to understand.

First steps

You will need to put the following JavasSript in your HTML! Do not forget this otherwise your code won’t work.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>

When you start to make a div to animate you always have to put an ngAnimate in the body like the following:

<body ng-app="ngAnimate">

ngAnimate options

Once everything is properly in place then you can finally start on making the div you want to hide, show , move etc. by using the following ng-directives:
* ng-show
* ng-hide
* ng-class
* ng-view
* ng-include
* ng-repeat
* ng-if
* ng-switch

Here’s an example on how to use a ng:

<div ng-hide="Example"></div>

The CSS part

You’ve got the div, the ng and you’re ready for CSS to animate your entire.
In CSS you want to use the ng part of your HTML in order to animate it properly.

div {
    transition: all linear 0.5s;
    background-color: green;
    height: 100px;
}
.ng-hide {
    height: 0;
}

This will make your div go up until it is hidden.

Complete

Once everything is complete and you know how it works you can make things that look like this:

HTML

< !DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script>
        </script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
        <style CSS FILE HERE></style>
    </head>
    <body ng-app="ngAnimate">
        <h1>Hide me:<input type="checkbox" ng-model="example"/></h1>
        <div ng-hide="example"></div>
    </body>
</html>

CSS

div {
  transition: all linear 0.5s;
  background-color: green;
  height: 100px;
}
.ng-hide {
  height: 0;
}

Posted by Mandy van Zetten

Leave a Reply

Your email address will not be published. Required fields are marked *