Question

如何在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值。当我点击按钮时，变量将获得false值并显示搜索表单。但我想用Angulars动画和jQuery来改变它。

Answer 1

这是一个很受欢迎的问题，但我还没有把所有东西放在一个地方。所以这是我的解决方案。在这里，我们创建自定义指令并观察animate-hide属性更改并根据其值来制作表单。

＆＃13;

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();
              });
            }
          });
        }
      }
    });

＆＃13;

form {
  height: 0;
  opacity: 0;
}

＆＃13;

<!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>

＆＃13;

Answer 2

看看我制作的这个小提琴：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框设置动画

2 个答案: