动画角闪警报器

Question

使用包，角闪光灯和有问题添加自定义动画到显示和隐藏警报。

从医生那里

如果您想使用动画，请包括ngAnimate模块。然后，您可以使用常规的角度动画技术来应用您自己的转换。

.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

谢谢

Answer 1

我开发了一个flash消息包并上传到npmjs.com中，我认为这个软件包会对你有帮助，

Package Name: Flash-Text
author: VamshiDureddy