Javascript 角度：淡入/淡出，不包括模块NgAnimate

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

我想用一个快速淡入/淡出动画显示一个绿色的勾号，表示数据的正确更新

我认为仅仅为动画添加一个20kb的模块是不值得的（我不需要为应用程序的任何其他部分设置动画）

---

有没有其他方法可以在不包含NgAnimate的情况下执行这样的简单动画，最好与“角度方式”保持一致？

是的，有一种方法-您可以使用CSS动画、

$timeout

和

ng class

。这是一个例子

基本上，您可以在父控制器中切换标志

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-animate.js？如果我删除了脚本，代码就不起作用了。Doh我错过了，答案说它省略了ng animated。你认为安装一个npm动画包是为了什么？嗯。。。也许我可以从css中提取相关的动画。。。我试试看，谢谢！我最终使用了您答案的变体，但归根结底是使用了超时特性、类和css。非常感谢。