使用AngularJS动画div盒
[英]Animate a div box with AngularJS
问题描述
如何在AngularJS中为div-Box设置动画？ 我已经为自己的意图尝试了几个示例，但是动画不起作用。
我想创建一个方法，如果用户单击该按钮，则搜索表单将在视图中显示带有过渡动画。
我知道我必须为我的App模块创建一个.animation（）。 我可以在Ctrl文件中创建它还是必须在单独的文件中创建它？
<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>
目前，我正在ng-hide中使用具有bool值的范围变量。 当我单击按钮时，变量将获得错误值，并显示搜索表单。 但是我想用Angulars动画和jQuery来改变它。
2 个解决方案
解决方案1
1 已采纳 2015-05-12 17:29:04
这是一个很普遍的问题，但是我还没有看到一切都放在一个地方。 所以这是我的解决方案。 在这里，我们创建自定义指令，并观察animate-hide属性的变化和基于其值的动画形式。
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>
解决方案2
0 2015-05-12 15:27:45
看看我做的这个小提琴： 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;
}
使用angularjs动画制作div动画
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.