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

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.jsangular will add和remove几个类时.基于这些类,我们可以为元素设置一个css动画.

这是一个简单的plunker

用于ng-include动画

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

这是 ng-enter演示Plunker

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