Animate A Div Box With AngularJS
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
Solution 1:
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>Solution 2:
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;
}
Post a Comment for "Animate A Div Box With AngularJS"