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

Question

我正在Angular中构建一个小型Web应用程序，其中包含一个带有“保存更改”按钮的表单。

我希望通过快速淡入/淡出动画显示绿色勾号，表示数据的正确更新。

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

是否有另一种方法来执行这样的简单动画而不包括NgAnimate，最好是与“Angular方式”保持一致？

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动画，这非常简单。