Open/Close Animations

Impression lies in what we see.
Different animations can be set for open and close events.

$ngConfirm({
    animation: 'zoom',
    closeAnimation: 'scale'
});
// Available animations:
// right, left, bottom, top, rotate, none, opacity, scale, zoom,
// scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)

Animation bounce

$ngConfirm({
    animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
});

Animation speed

$.confirm({
    animationSpeed: 2000 // 2 seconds
});
$.confirm({
    animationSpeed: 200 // 0.2 seconds
});

Define your custom animations

Defining your custom animations lets you match your existing user interface.

.ng-confirm .ng-confirm-box.ng-confirm-animation-news{
    transform: rotate(400deg) scale(0);
}

$ngConfirm({
    animation: 'news',
    closeAnimation: 'news',
});

The animation name should be lowercase, or they wont work.

• .ng-confirm-animation-animation-name translates to 'animation-name'
• .ng-confirm-animation-animationhere translates to 'animationhere'

Background dismiss animation

This animation takes place when backgroundDismiss is false, or returns a falsy value.

.ng-confirm .ng-confirm-box.ng-confirm-hilight.ng-confirm-hilight-random {
    /*the animation name is bob*/
    transform: translate3d(0, 0, 0);
    animation: random 1s;
}

@keyframes random {
    10%, 90% {
        transform: rotate(-2deg);
    }
    20%, 80% {
        transform: rotate(4deg);
    }
    30%, 50%, 70% {
        transform: rotate(-8deg);
    }
    40%, 60% {
        transform: rotate(8deg);
    }
}

$ngConfirm({
    backgroundDismissAnimation: 'random',
});

The animation name should be lowercase, or they wont work.