Угловой: втекать/выходить без использования модуля NgAnimate

Question

Я создаю небольшое веб-приложение в Angular, которое включает в себя форму с кнопкой «сохранить изменения».

Я бы хотел показать зеленый галочку, означающий правильное обновление данных, с быстрой анимацией затухания/затухания.

Я не думаю, что стоит добавить 20-й модуль Kb только для этой анимации (мне не нужно анимировать какую-либо другую часть приложения).

Есть ли альтернативный способ выполнения простой анимации, такой как это без включения NgAnimate, который предпочтительно соответствует «Угловому пути»?

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, и это очень просто.