javascript - 在 ng-hide CSS 转换完成之前不要 ng-show 元素吗？

Question

简单的问题，但我遇到了实现问题。如果我有以下 DOM 设置:

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

当 parent 模型的 activeChild 属性改变时，如何在模型改变 之前淡出当前事件的子节点，以及然后淡出新激活的子元素 post-change。

我已经粗略地使用了它，只使用了 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;
    }
}

但是，这最终会产生 this problem (Plunkr) :

本质上，我想链接我的动画。我试过阅读 ng-animate docs , 但我在提供我想要的效果所需的语法方面遇到了麻烦。

我看到 Angular 文档有这样的内容:

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

• 什么是className？这是我想在淡入/淡出时申请的类(class)吗？我期待的类(class)？
• doneFn 是什么意思？我假设这是一个在动画完成后运行的函数？里面有什么？
• 如果我已经有一个 doneFn，我应该在 addClass 和 removeClass 函数中做什么？

目标

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

Answer 1

为什么要使用单独的<h1>对于每个标题。您可以使用单个 <h1>标记以显示您的标题。

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

已更新

请注意，代码被编辑为使用 ngAnimate模块。当您使用 ngAnimate模块，它将创建一个类 .ng-hide当你隐藏一个元素时，

这是您应用的 Controller ，

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>标记以显示您的标题。当我更改标题时，我只是更改它的绑定(bind)属性 $scope.parent.activeChild .

而且我使用了两个作用域变量 $scope.heading.fadeOutModel和 $scope.heading.fadeInModel添加和删​​除类 fadeIn和 fadeOut动态地。

当用户点击更改标题时，我添加了类 fadeOut到你的航向。因此，这将显示淡出动画。而且我还在 app.js 中触发了一个函数，changeHeading() .

你可以看到，我强制 Angular 等待1000完成淡出动画的毫秒数。这段时间之后，它会将所选标题替换为新标题并添加一个类 fadeIn .因此，它将开始淡入动画。

希望这对你有帮助!!!