Bring a div box to life using AngularJS

Question

Bring a div box to life using AngularJS

Struggling to animate a div-Box in AngularJS? Despite trying multiple examples, the animation just won't cooperate.

I'm aiming to implement a feature where clicking on a button triggers a transition animation to display the search form.

I understand that I need to add an .animation() method to my App module. Should this be done within a Ctrl file or a separate one?

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

//The button resides in a separate panel
<button type="button" class="btn" ng-click="btnSearch()">
  Search
</button>

Currently, I'm using a scope variable in ng-hide with a boolean value to toggle the visibility of the search form upon button click. However, I'd prefer to achieve this using Angular's animation and jQuery.

javascript jquery css angularjs

Answer 1

Answer №1

While this question is commonly asked, I have compiled a solution that consolidates everything in one place. In this solution, a custom directive is created to watch the animate-hide attribute for changes and animate the form based on its 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>

Answer 2

While this question is commonly asked, I have compiled a solution that consolidates everything in one place. In this solution, a custom directive is created to watch the animate-hide attribute for changes and animate the form based on its 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>

Answer 3

Answer №2

Check out the fiddle I created: 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;
}

Answer 4

Check out the fiddle I created: 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;
}

Bring a div box to life using AngularJS

Answer №1

Answer №2

Similar questions

Step-by-step guide on dynamically fetching additional images from a directory using php, jquery, and ajax

Unable to render images in Angular client due to issues with accessing upload path in Express Node.js backend

CSS vertical alignment property

What causes the left click to not trigger in Kendo's Angular Charts?

What causes the $injector:modulerr error when trying to integrate angular-carousel?

Having trouble accessing env variables from React Component in Next.js?

GAE does not have access to background images

Tips for activating this effect even when the window is resized during page scrolling

Discovering the compiled CSS file in React when using Sass: A step-by-step guide

Having trouble populating a dropdown menu with states based on a selected country in real time

Ways to retrieve the current state within a function after invoking the setState method

Oops! The type '{}' is lacking the properties listed below

Tips for preloading an ENTIRE webpage

Protractor unexpectedly giving back a promise instead of the expected attribute value

Learn how to securely download files from an Azure Storage Container using Reactjs

Vue event manager, accessible for all components

Ajax waits for the animation to finish before proceeding

Styling a HTML div element with a header and footer, while also ensuring that the

Speed up - Handle alias resolution with module federation

What exactly do bootstrap, javascript, jquery, and ajax entail?