在ng-hide CSS转换完成之前,不要显示元素吗？

Question

简单的问题,但我遇到了实施问题.如果我有以下DOM设置:

<h1 class="fade" ng-repeat="child in parent.children" ng-show="parent.activeChild== child ">@{{ child.title }}</h1>

当activeChild财产parent模式的转变,我怎么能淡出当前活动的孩子,之前的模式的转变,然后消失在新的活动孩子后的变化.

我大致工作,只使用CSS转换:

.fade.ng-hide-add {
    transition:opacity 1s ease;
}

.fade.ng-hide-remove {
    transition:opacity 1s ease 1s;
}

.fade.ng-hide-add {
    opacity:1;

    &.ng-hide-add-active {
        opacity:0;
    }
}

.fade.ng-hide-remove {
    opacity:0;

    &.ng-hide-remove-active {
        opacity:1;
    }
}

但是,这最终产生了这个问题(Plunkr):

基本上,我想链接我的动画.我已经尝试过阅读ng-animate文档,但是我遇到了提供我想要的效果所需的语法.

我看过Angular文档有这样的东西:

app.animation('.fade', [function() {
    return {
        addClass: function(element, className, doneFn) {
        },
        removeClass: function(element, className, doneFn) {
        }
    };
}]);

• 什么是className？这是我想要在淡入/淡出时应用的课程吗？我期待的课程？
• 是什么doneFn意思？我假设这是一个动画完成后运行的功能？那里有什么？
• 我怎么在做addClass和removeClass功能,那么,如果我已经有一个doneFn？

目标

我想直接使用Angular的ngAnimate模块生成一个工作动画,使用CSS或JS.我怎样才能做到这一点？

Answer 1

为什么<h1>每个标题都使用一个单独的.您可以使用单个<h1>标记来显示标题.

我已经为您的问题创建了一个演示,并且我已成功完成您的要求.

更新

注意,代码被编辑为使用ngAnimate模块.当你使用ngAnimate模块时,它会.ng-hide在你隐藏元素时创建一个类,

这是你的应用程序的控制器,

app2.controller("testController", ["$scope", "$timeout", function ($scope, $timeout) {

    $scope.heading = {};
    $scope.heading.show = true;

    $scope.parent = {};
    $scope.parent.children = ["A", "B", "C", "D"];
    $scope.parent.activeChild = "A";

    $scope.changeHeading = function (child) {
        $timeout(function () {
            $scope.parent.activeChild = child;
            $scope.heading.show = true;
        }, 1000);

    }
}]);

你的html页面应该是这样的,

<div ng-controller="testController">
    <h1 class="myAnimateClass" ng-show="heading.show" ng-class="{fadeIn : heading.fadeInModel==true, fadeOut : heading.fadeOutModel}"> {{parent.activeChild}} </h1>
    <p ng-repeat="child in parent.children" ng-click="heading.show = false;changeHeading(child)">{{child}}</p>
</div>

我用CSS3来实现淡入和淡出动画,

.myAnimateClass {
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity:1;
}

.myAnimateClass.ng-hide {
    opacity: 0;
}

说明

为了达到你的要求,我已经使用ng-class并$timeout在angularJS.

你可以看到,我只有一个<h1>标签来显示你的标题.当我更改标题时,我只需更改它的绑定属性$scope.parent.activeChild.

我使用了两个范围变量$scope.heading.fadeOutModel,并动态地$scope.heading.fadeInModel添加和删​​除类.fadeInfadeOut

当用户单击以更改标题时,我已将该类添加fadeOut到您的标题中.所以,这将显示淡出的动画.而且我也在app.js中启动了一个函数changeHeading().

你可以看到,我强迫角度等待1000毫秒来完成淡出动画.在此之后,它会将所选标题替换为新标题并添加一个类fadeIn.因此,它将启动淡入动画.

希望对你有帮助 !!!