Animate a div box with AngularJS

Question

How can I animate a div-Box in AngularJS? I've tried several examples for my intention, but the animation doesn't work.

I want to create a method, if the user clicked on the button, then the search form displays in the view with a transition animation.

I know I have to create for my App module an .animation(). Can I create this in a Ctrl file or do I have to create it in a separate file?

<div ng-class="searchFormAnimation" ng-hide="searchFormHide">
...//search form
</div>

//In a separate panel is the button
<button type="button" class="btn" ng-click="btnSearch()">
  Search
</button>

Currently I'm using a scope variable in ng-hide which has a bool value. When I'm clicking on the button, then the variable gets the false value and the search form is showing. But I want to change this with Angulars animation and jQuery.

Do you have a jsfiddle that we can play with? what sort of animation are you looking for? — Andrew, May 12 '15 at 14:42
Have you read [this SO post](http://stackoverflow.com/questions/21591860/how-to-use-ng-animate-in-angular-1-2)? — Martin, May 12 '15 at 14:42
For DOM manipulation it's best to use directives and yes there are a lot of tutorials on how to use animations in AngularJS. — Michelangelo, May 12 '15 at 14:45
Unfortunately I don't have a JSFiddle. I have added the ngAnimate in my App Module and the script angular-animate.js in the index.html. I have taken the code sample from the angular docs site [link](https://docs.angularjs.org/guide/animations) .The jQuery Part. But I want to use it in my method btnSearch() and when you click on the button then the animation will should fired. — yuro, May 12 '15 at 14:51
@Mikey I have thought of a directive. In the angular docs are an abstract code sample how to create an animation directive. — yuro, May 12 '15 at 14:53

Ruslanas Balčiūnas · Accepted Answer · 2015-05-19T09:20:51.060

This is a popular question, but I haven't seen everything put in one place. So here is my solution. Here we create custom directive and watch animate-hide attribute change and animate form based on it's value.

var app = angular.module('animation', [
      
    ]).controller('MainController', function($scope) {
      $scope.hide = true;      
    }).directive('animateHide', function() {
      return {
        link: function(scope, element, attrs) {
          
          scope.$watch(attrs.animateHide, function(val) {
            if(!val) {
              element.animate({
                "height": '100px',
                "opacity": "1"
              }, 300).show();
            } else {
              element.animate({
                "height": '0px',
                "opacity": "0"
              }, 100, function() {
                $(this).hide();
              });
            }
          });
        }
      }
    });

form {
  height: 0;
  opacity: 0;
}

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
  </head>

  <body ng-app="animation">
    <div ng-controller="MainController">
      <form animate-hide="hide"><input type="text" placeholder="Search"/></form>
      <button ng-click="hide = !hide">
        {{hide ? 'Show form' : 'Hide form'}}
      </button>
    </div>
  </body>

</html>

many many thanks :) That is a perfect solution for my problem. Could I also use $on instead of $watch? — yuro, May 13 '15 at 08:29
I've a question to your solution. When the page is starting the show-form-btn firstly goes up. How can I change this when I go to the page the btn moves only when I click on the button? — yuro, May 19 '15 at 07:29

score 0 · Answer 2 · answered May 12 '15 at 15:27

0

Take a look at this fiddle I made: http://jsfiddle.net/Lst8yudb/

angular.module("app", ['ngAnimate'])
.controller('mainctrl', function ($scope) {
    $scope.hide = false;
    $scope.hideForm = function () {
     $scope.hide=true;   
    }

});

.myform {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
  background-color:red;
}

.myform.ng-hide {
   background-color:green;
  opacity:0;
}

answered May 12 '15 at 15:27

Michelangelo

5,888
5
31
50

Hej Mikey.. thanks for your example. I've taken the solution of ruslanas but I have one question to his example. When I'm loading the page, then the div box hides firstly, but I want that the box is already hidden. – yuro May 13 '15 at 09:17
Well if you really want to learn Angular you should not use Ruslanas answer. Not because it is bad, but it relies on jQuery too much. If you really want to master Angular animations you should go with ngAnimate. However, here is a fix to your problem http://jsfiddle.net/L8b0sfdL/. – Michelangelo May 13 '15 at 22:29
Ok, that means in AngularJS I also need to work with angular modules like ngAnimate etc.? My question is why is it bad to work with jQuery in Angular code? – yuro May 15 '15 at 09:45

Animate a div box with AngularJS

2 Answers2

Linked