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

Addressing the Cross Domain Issue when Implementing DHIS 2 API with jQuery

Adding miscellaneous PHP scripts

Three responsive images neatly arranged within separate div containers

The Google Maps API allows all markers to be connected to a single infowindow

The CSS and Bundle script path may need adjustment following the creation of the index.html file by WebPack

The display of the selected input is not appearing when the map function is utilized

Table that can be scrolled through

JavaScript: Working with Nested Callbacks and Retrieving MySQL Data

Angular - remove elements from an array within a directive when encountering a source error

Error encountered while using XLSX.write in angular.js: n.t.match function is not recognized

Avoid relying on automated CSS generation

Encountering issues in parsing JSON for PhoneGap Application

What steps can be taken to create an electron menu for easily conducting a general search within the current window?

Unable to close Bootstrap modal upon clicking "x" or "close" buttons

Implementing the cryptocoins-icons npm package in your AngularJS application for enhanced icons

Npm is unable to locate the package.json file in the incorrect directory

Clicking does not trigger scrollIntoView to work properly

Creating a dynamic dropdown menu using jQuery animation

Using $location in a factory is a common practice when working with AngularJS

Adjusting the size of a textarea using jQuery