使用 AngularJS 为 div 框设置动画答案

【问题标题】：Animate a div box with AngularJS使用 AngularJS 为 div 框设置动画
【发布时间】：2015-07-23 12:27:15
【问题描述】：

如何在 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 中使用一个具有布尔值的范围变量。当我单击按钮时，变量会获取 false 值并显示搜索表单。但我想用 Angulars 动画和 jQuery 来改变这一点。

【问题讨论】：

你有我们可以玩的 jsfiddle 吗？你在找什么样的动画？
你读过this SO post吗？
对于 DOM 操作，最好使用指令，是的，有很多关于如何在 AngularJS 中使用动画的教程。
不幸的是我没有 JSFiddle。我在我的 App Module 中添加了 ngAnimate，在 index.html 中添加了脚本 angular-animate.js。我从 Angular 文档站点 link 获取了代码示例。jQuery 部分。但我想在我的方法 btnSearch() 中使用它，当您单击按钮时，动画将被触发。
@Mikey 我想到了一个指令。在 Angular 文档中，有一个抽象代码示例如何创建动画指令。

标签： javascript jquery css angularjs

【解决方案1】：

看看我做的这个小提琴：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;
}

【讨论】：

Hej Mikey.. 谢谢你的例子。我已经采取了 ruslanas 的解决方案，但我对他的例子有一个问题。当我加载页面时，div框首先隐藏，但我希望该框已经隐藏。
好吧，如果你真的想学习 Angular，你不应该使用 Ruslanas 的答案。不是因为它不好，而是它过于依赖 jQuery。如果你真的想掌握 Angular 动画，你应该使用 ngAnimate。但是，这是解决您的问题的方法jsfiddle.net/L8b0sfdL。
好的，这意味着在 AngularJS 中我还需要使用 ngAnimate 等角度模块？我的问题是为什么在 Angular 代码中使用 jQuery 不好？

【解决方案2】：

这是一个流行的问题，但我还没有看到所有东西都放在一个地方。所以这是我的解决方案。在这里，我们创建自定义指令并观察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>

【讨论】：

非常感谢 :) 这对我的问题来说是一个完美的解决方案。我也可以用 $on 代替 $watch 吗？
我对您的解决方案有疑问。当页面启动时，show-form-btn 首先上升。当我转到仅在单击按钮时 btn 移动的页面时，如何更改此设置？
CSS form {height:0; opacity:0;}