CODEWITHSUNDEEP
angularjscss-animationsng-animate
DogCoffee
DogCoffee

Reputation: 19966

Animate Angular-flash Alerts

Using the package, Angular-flash and having issues adding custom animations to the showing and hiding of an alert.

From the docs

If you want to use animations, include ngAnimate module. You can then use regular Angular animation technique for applying your own transitions.

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

I feel like I've tried all possible combinations but struggle to get the in . out effects.

My HTML

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

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

Controller

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

Just to test my CSS animation is working I just added an animation to the alert class. This provides the show animation only. 

.alert {
    animation: 1.5s zoomIn ease;
}

I need to be able to attach it to the "Alert Show Event" and then attach a zoom out to the "Alert Hide Event", allowing a specific show and hide effect.

I've tried these in multiple combinations but struggle to find what class to associate with the show / hide animations.

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

Thanks

Upvotes: 1

Views: 1214

Answers (1)

VamshiDureddy
VamshiDureddy

Reputation: 1

I developed a flash message package and uploaded it in npmjs.com, i think the package will help you,

Package Name: Flash-Text
author: VamshiDureddy

Upvotes: 0

Related Questions