Angular: 淡出 in/out 不包括模块 NgAnimate

Question

我正在 Angular 中构建一个小型网络应用程序，其中包含一个带有 "save changes" 按钮的表单。

我想用快速 fade-in/fade-out 动画显示表示数据正确更新的绿色勾号。

我认为只为该动画添加 20-ish Kb 模块不值得（我不需要为应用程序的任何其他部分设置动画）。

是否有其他方法可以在不包括 NgAnimate 的情况下执行像这样的简单动画，最好与 "Angular way" 保持一致？

Answer 1

是的，有一种方法 - 您可以使用 CSS 动画、$timeout 和 ng-class。这是一个 example.

基本上你在父控制器中切换标志

ctrl.showCheckmark = function() {
    ctrl.isShowingCheckmark = true;

    $timeout(function() {
        ctrl.isShowingCheckmark = false;
    }, 2000);
}

并观察复选标记组件的变化。

当标志更改时，您设置可见性和淡入标志：

$ctrl.show = function() {
    $ctrl.isShowing = true;

    $timeout(function() {
        $ctrl.fadeIn = true;
        $ctrl.fadeOut = false;
    });
};

使用 $timeout 等待前一个 $digest 完成并呈现 ng-if="$ctrl.isShowing"。

剩下的就是编写一些 CSS 动画，这非常简单。

Angular: 淡出 in/out 不包括模块 NgAnimate

Angular: Fade in/out without including module NgAnimate

javascript

animation

angularjs

ng-animate