5

与 jquery 相比，我发现制作角度动画非常困难。有很多版本的角度动画淡入和淡出，我从博客/教程/等中找到了它们，其中一些是旧版本的 angular。当新版本的 Angular 出现替换旧版本时，它似乎非常不一致。我看不到任何标准的做法。因此，我不知道从哪里开始。

我只是在单击按钮时淡入表单或 html 文档。

html,

<button ng-click="loadInclude" >Load Include Form</button>
<div ng-include="'form.php'" ng-if="readyToLoadForm===true"></div>

角，

   var app = angular.module("myapp", ['ngAnimate']);

   app.controller("FormController",function($scope) {

            $scope.readyToLoadForm = false;
            $scope.loadInclude = function(e) {
                $scope.readyToLoadForm = true;
            };
        }
    );

有任何想法吗？

4

1 回答 1

9

在这种情况下，您可以使用ng-showorng-hide

<div ng-show="readyToLoadForm" class="animate-show animate-hide">TEST HERE</div>

在显示和隐藏时使用angular-animate.jsangular willadd和remove几个类来显示和隐藏该项目。基于这些类，我们可以为元素设置一个 CSS 动画。

这是一个简单的plunker

用于ng-include动画

ng-leave .ng-leave-active .ng-enter-active类添加到元素。有一点关于动画时添加的类的描述。那个 desc 来自ngAnimate

这是 ng-enter演示Plunker

这是angularjs 中的动画元素时如何将类分配给元素的参考

于 2014-12-13T11:28:11.107 回答