scripts.node_modules.jquery-confirm.animations.html Maven / Gradle / Ivy
jquery-confirm.js | Animations
Animations - Use one, or define your own.
jquery-confirm
v
-
docs
view on Github
Open/Close Animations
Impression lies in what we see.
Different animations can be set for open and close events.
animateFromElement is added since v3.3.0, which animates the modal from the position of the button that was clicked.
This feature does not play well with all the animation styles.
Recommended animations for animateFromElement:
2D animations: (animateFromElement disabled)
3D animations: (animateFromElement disabled)
You can also create/define your own animations
$.confirm({
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.
$.confirm({
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
.jconfirm .jconfirm-box.jconfirm-animation-news{
// the animation name is bob
transform: rotate(400deg) scale(0);
}
$.confirm({
animation: 'news',
closeAnimation: 'news',
});
The animation name should be lowercase, or they wont work.
-
.jconfirm-animation-animation-name translates to 'animation-name'
-
.jconfirm-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
.jconfirm .jconfirm-box.hilight.jconfirm-hilight-random {
/*the animation name is bob*/
transform: translate3d(0,0,0);
animation: random 2s;
}
@keyframes random{
10%, 90% {
transform: rotate(-2deg);
}
20%, 80% {
transform: rotate(4deg);
}
30%, 50%, 70% {
transform: rotate(-8deg);
}
40%, 60% {
transform: rotate(8deg);
}
}
$.confirm({
backgroundDismissAnimation: 'random',
});
The animation name should be lowercase, or they wont work.