Angular:淡入/淡出，不包括模块NgAnimate

Angular: Fade in/out without including module NgAnimate

本文关键字：不包括 模块 NgAnimate 淡出 淡入 Angular      更新时间：2023-09-26

我正在用Angular构建一个小的web应用程序，其中包括一个带有"保存更改"按钮的表单。

我想显示一个绿色的刻度，表示数据的正确更新，并带有一个快速的渐入/渐出动画。

我不认为仅仅为这个动画添加一个20 Kb左右的模块是值得的(我不需要为应用程序的任何其他部分添加动画)。

是否有一种替代的方法来执行一个简单的动画，如不包括NgAnimate，最好保持符合"Angular的方式"?

是的，有一种方法-你可以利用CSS动画，$timeout和ng-class。下面是一个例子。

基本上就是在父控制器

中切换标志
ctrl.showCheckmark = function() {
    ctrl.isShowingCheckmark = true;
    $timeout(function() {
        ctrl.isShowingCheckmark = false;
    }, 2000);
}

并观察checkmark组件中的变化。

当标志改变时，您可以设置可见性和渐隐标志:

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

使用$timeout等待之前的$digest完成并渲染ng-if="$ctrl.isShowing"。

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

相关文章：