• We just launched and are currently in beta. Join us as we build and grow the community.

AngularJS Show/Hide Animation using ngAnimate

Unknown222

Autonomous Tech Innovator
U
U Rep
0
0
0
Rep
0
U Vouches
0
0
0
Vouches
0
Posts
65
Likes
200
Bits
0
2 MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1 300 XP
Step 1 : Add Dependency

In the header portion of your HTML, add the following:

  1. <link

     href

    =

    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

    rel

    =

    "stylesheet"

    >
  2. <script

     src

    =

    "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"

    ></

    script

    >
  3. <script

     src

    =

    "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"

    ></

    script

    >

Take note that your angular-animate version should be the same as your angular version.

Step 2 : Add Style

Include the following style.

  1. .sample-animation

    {
  2. transition

    :

    all linear 0.5s

    ;
  3. }
  4. .sample-animation

    .ng-hide

    {
  5. opacity

    :

    0

    ;
  6. }
  7. #alertDiv

    {
  8. margin-top

    :

    10px

    ;
  9. }

Step 3 : Creating the Body

This contains our sample div to hide/show to show our animation.

  1. <div

     class

    =

    "container"

    >
  2. <h1

     class

    =

    "page-header text-center"

    >

    AngularJS Show/Hide Animation using ngAnimate</

    h1

    >
  3. <div

     class

    =

    "text-center"

    >
  4. <button

     type

    =

    "button"

    class

    =

    "btn btn-primary btn-lg"

    ng-click=

    "show()"

    >

    {{ action }}</

    button

    >
  5. </

    div

    >
  6. <div

     class

    =

    "row"

    id

    =

    "alertDiv"

    >
  7. <div

     class

    =

    "col-sm-6 col-sm-offset-3"

    >
  8. <div

     class

    =

    "alert alert-success text-center sample-animation"

    ng-show=

    "myAlert"

    >
  9. <button

     type

    =

    "button"

    class

    =

    "close"

    ng-click=

    "hide()"

    ><span

     aria-hidden=

    "true"

    >

    &times;

    </

    span

    ></

    button

    >
  10. This is a sample alert
  11. </

    div

    >
  12. </

    div

    >
  13. </

    div

    >
  14. </

    div

    >

Step 4 : Add the Angular JS script

Lastly, this is our angular js script.

  1. var

    app =

    angular.module

    (

    'app'

    ,

    [

    'ngAnimate'

    ]

    )

    ;

  3. app.controller

    (

    'myCtrl'

    ,

    function

    (

    $scope)

    {
  4. $scope.myAlert

    =

    false

    ;
  5. $scope.action

    =

    'Show'

    ;

  7. $scope.show

    =

    function

    (

    )

    {
  8. if

    (

    $scope.myAlert

    ==

    false

    )

    {
  9. $scope.myAlert

    =

    true

    ;
  10. $scope.action

    =

    'Hide'

    ;
  11. }
  12. else

    {
  13. $scope.hide

    (

    )

    ;
  14. }

  16. }

  18. $scope.hide

    =

    function

    (

    )

    {
  19. $scope.myAlert

    =

    false

    ;
  20. $scope.action

    =

    'Show'

    ;
  21. }
  22. }

    )

    ;

Don't forget to include the dependency of ngAnimate in your app.

  1. <!DOCTYPE html>
  2. <html

     ng-app=

    "app"

    >
  3. <head

    >
  4. <title

    >

    AngularJS Show/Hide Animation using ngAnimate</

    title

    >
  5. <link

     href

    =

    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

    rel

    =

    "stylesheet"

    >
  6. <script

     src

    =

    "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"

    ></

    script

    >
  7. <script

     src

    =

    "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"

    ></

    script

    >
  8. <style

     type

    =

    "text/css"

    >
  9. .sample-animation {
  10. transition: all linear 0.5s;
  11. }
  12. .sample-animation.ng-hide {
  13. opacity: 0;
  14. }
  15. #alertDiv{
  16. margin-top: 10px;
  17. }
  18. </

    style

    >
  19. </

    head

    >
  20. <body

     ng-controller=

    "myCtrl"

    >
  21. <div

     class

    =

    "container"

    >
  22. <h1

     class

    =

    "page-header text-center"

    >

    AngularJS Show/Hide Animation using ngAnimate</

    h1

    >
  23. <div

     class

    =

    "text-center"

    >
  24. <button

     type

    =

    "button"

    class

    =

    "btn btn-primary btn-lg"

    ng-click=

    "show()"

    >

    {{ action }}</

    button

    >
  25. </

    div

    >
  26. <div

     class

    =

    "row"

    id

    =

    "alertDiv"

    >
  27. <div

     class

    =

    "col-sm-6 col-sm-offset-3"

    >
  28. <div

     class

    =

    "alert alert-success text-center sample-animation"

    ng-show=

    "myAlert"

    >
  29. <button

     type

    =

    "button"

    class

    =

    "close"

    ng-click=

    "hide()"

    ><span

     aria-hidden=

    "true"

    >

    &times;

    </

    span

    ></

    button

    >
  30. This is a sample alert
  31. </

    div

    >
  32. </

    div

    >
  33. </

    div

    >
  34. </

    div

    >
  35. <script

    >
  36. var app = angular.module('app', ['ngAnimate']);

  38. app.controller('myCtrl', function($scope){
  39. $scope.myAlert = false;
  40. $scope.action = 'Show';

  42. $scope.show = function(){
  43. if($scope.myAlert == false){
  44. $scope.myAlert = true;
  45. $scope.action = 'Hide';
  46. }
  47. else{
  48. $scope.hide();
  49. }

  51. }

  53. $scope.hide = function(){
  54. $scope.myAlert = false;
  55. $scope.action = 'Show';
  56. }
  57. });
  58. </

    script

    >
  59. </

    body

    >
  60. </

    html

    >

That ends this tutorial. Happy Coding :)

 
You must log in or register to reply here.

452,292

323,526

323,535

R rathi
Top