#

Animations - Use one, or define your own.

angular-confirm v docs
view on Github

back to Main Docs

## Open/Close Animations

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

2D animations:

3D animations:

You can also create/define your own animations

    $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

Some eye candy thats in fashion.

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

#### Animation speed

Adjust the duration of animation.

    $.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.

Example for a newsflash animation.
These animations are define the starting point of the openAnimation and ending point of the closeAnimation

    .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.

Example for a newsflash animation.
These animations are define the starting point of the openAnimation and ending point of the closeAnimation

    .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.