Question

与jquery相比，我觉得用角度制作动画非常困难。有很多版本的角度动画fadein和fadeout，我从博客/教程/等找到它们，其中一些版本是旧版本的角度。当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;
            };
        }
    );

任何想法？

Answer 1

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

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

在显示和隐藏时，对此项目使用angular-animate.js angular add和remove几个类时。基于这些类，我们可以为元素设置一个css动画。

这是一个简单的plunker

适用于ng-include动画

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

这是ng-enter演示Plunker

这里是reference，用于在angularjs中的动画元素

时分配给元素的类

Angular fadein和fadeout - 没有CSS的标准方式？

1 个答案: