动画角闪光警报答案

【问题标题】：Animate Angular-flash Alerts动画角闪光警报
【发布时间】：2017-05-24 08:20:58
【问题描述】：

使用包 Angular-flash 并在添加自定义动画以显示和隐藏警报时遇到问题。

来自文档

如果你想使用动画，请包含 ngAnimate 模块。然后你可以使用常规的 Angular 动画技术来应用你自己的过渡。

.alert {...}
.alert.ng-enter, .alert.ng-enter.ng-enter-active {...}
.alert.ng-leave, .alert.ng-leave.ng-leave-active {...}

我觉得我已经尝试了所有可能的组合，但很难进入。出效果。

我的 HTML

    <flash-message>
        <div>{{ flash.text }}</div>
    </flash-message>

    <button ng-click="showFlash()">PRESS ME</button>

控制器

$scope.showFlash = function() {
    var message = '<strong>Hello!</strong> ';
    var id = Flash.create('info', message, 4000, false);
};

只是为了测试我的 CSS 动画是否正常工作，我只是在警报类中添加了一个动画。这仅提供显示动画。

.alert {
    animation: 1.5s zoomIn ease;
}

我需要能够将其附加到“警报显示事件”，然后将缩小附加到“警报隐藏事件”，以实现特定的显示和隐藏效果。

我已经尝试了多种组合，但很难找到与显示/隐藏动画相关联的类。

.alertIn, 
.alertOut
.alert.ng-hide-add-active
.alert.ng-hide-remove-active

谢谢

【问题讨论】：

【解决方案1】：

我开发了一个flash消息包并上传到npmjs.com，我觉得这个包对你有帮助，

Package Name: Flash-Text
author: VamshiDureddy

【讨论】：