如何在 AngularJS 中为 div-Box 设置动画？我已经按照我的意图尝试了几个示例，但动画不起作用。
我想创建一个方法，如果用户单击按钮，则搜索表单会显示在 View 中并带有过渡动画。
我知道我必须为我的 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 来改变这一点。
最佳答案
这是一个很受欢迎的问题，但我还没有看到所有内容都放在一个地方。所以这是我的解决方案。在这里，我们创建自定义指令并观察 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>关于javascript - 使用 AngularJS 动画一个 div 框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30194123/