ngx-animations
Version:
An adaptation of Animate.css using @angular/animations
1,138 lines (1,112 loc) • 40.6 kB
JavaScript
import { Injectable, Directive, TemplateRef, ViewContainerRef, Input, ElementRef, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { style, animate, AnimationBuilder, transition, query } from '@angular/animations';
import { timer } from 'rxjs';
import { __awaiter } from 'tslib';
const fadeIn = {
denominator: 1,
start: { opacity: '0' },
steps: [{ opacity: '1' }]
};
const fadeInDown = {
denominator: 1,
start: { opacity: '0', transform: 'translate3d(0, -100%, 0' },
steps: [{ opacity: '1', transform: 'translate3d(0, 0, 0' }]
};
const fadeInDownBig = {
denominator: 1,
start: { opacity: '0', transform: 'translate3d(0, -2000px, 0' },
steps: [{ opacity: '1', transform: 'translate3d(0, 0, 0' }]
};
const fadeInLeft = {
denominator: 1,
start: { opacity: '0', transform: 'translate3d(-100%, 0, 0' },
steps: [{ opacity: '1', transform: 'translate3d(0, 0, 0' }]
};
const fadeInLeftBig = {
denominator: 1,
start: { opacity: '0', transform: 'translate3d(-2000px, 0, 0' },
steps: [{ opacity: '1', transform: 'translate3d(0, 0, 0' }]
};
const fadeInRight = {
denominator: 1,
start: { opacity: '0', transform: 'translate3d(100%, 0, 0' },
steps: [{ opacity: '1', transform: 'translate3d(0, 0, 0' }]
};
const fadeInRightBig = {
denominator: 1,
start: { opacity: '0', transform: 'translate3d(2000px, 0, 0' },
steps: [{ opacity: '1', transform: 'translate3d(0, 0, 0' }]
};
const fadeInUp = {
denominator: 1,
start: { opacity: '0', transform: 'translate3d(0, 100%, 0' },
steps: [{ opacity: '1', transform: 'translate3d(0, 0, 0' }]
};
const fadeInUpBig = {
denominator: 1,
start: { opacity: '0', transform: 'translate3d(0, 2000px, 0' },
steps: [{ opacity: '1', transform: 'translate3d(0, 0, 0' }]
};
const fadeOut = {
denominator: 1,
start: { opacity: '1' },
steps: [{ opacity: '0' }]
};
const fadeOutDown = {
denominator: 1,
start: { opacity: '1' },
steps: [{ opacity: '0', transform: 'translate3d(0, 100%, 0' }]
};
const fadeOutDownBig = {
denominator: 1,
start: { opacity: '1' },
steps: [{ opacity: '0', transform: 'translate3d(0, 2000px, 0' }]
};
const fadeOutLeft = {
denominator: 1,
start: { opacity: '1' },
steps: [{ opacity: '0', transform: 'translate3d(-100%, 0, 0' }]
};
const fadeOutLeftBig = {
denominator: 1,
start: { opacity: '1' },
steps: [{ opacity: '0', transform: 'translate3d(-2000px, 0, 0' }]
};
const fadeOutRight = {
denominator: 1,
start: { opacity: '1' },
steps: [{ opacity: '0', transform: 'translate3d(100%, 0, 0' }]
};
const fadeOutRightBig = {
denominator: 1,
start: { opacity: '1' },
steps: [{ opacity: '0', transform: 'translate3d(2000px, 0, 0' }]
};
const fadeOutUp = {
denominator: 1,
start: { opacity: '1' },
steps: [{ opacity: '0', transform: 'translate3d(0, -100%, 0' }]
};
const fadeOutUpBig = {
denominator: 1,
start: { opacity: '1' },
steps: [{ opacity: '0', transform: 'translate3d(0, -2000px, 0' }]
};
const bounceIn = {
denominator: 5,
start: { opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)', offset: 0 },
steps: [
{ transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.2 },
{ transform: 'scale3d(0.9, 0.9, 0.9)', offset: 0.4 },
{ opacity: '1', transform: 'scale3d(1.03, 1.03, 1.03)', offset: 0.6 },
{ transform: 'scale3d(0.97, 0.97, 0.97)', offset: 0.8 },
{ opacity: '1', transform: 'scale3d(1, 1, 1)' }
]
};
const bounceInDown = {
denominator: 4,
start: { opacity: '0', transform: 'translate3d(0, -3000px, 0)', offset: 0 },
steps: [
{ opacity: '1', transform: 'translate3d(0, 25px, 0)', offset: 0.6 },
{ transform: 'translate3d(0, -10px, 0)', offset: 0.75 },
{ transform: 'translate3d(0, 5px, 0)', offset: 0.9 },
{ transform: 'translate3d(0, 0, 0)' }
]
};
const bounceInLeft = {
denominator: 4,
start: { opacity: '0', transform: 'translate3d(-3000px, 0, 0)', offset: 0 },
steps: [
{ opacity: '1', transform: 'translate3d(25px, 0, 0)', offset: 0.6 },
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.75 },
{ transform: 'translate3d(5px, 0, 0)', offset: 0.9 },
{ transform: 'translate3d(0, 0, 0)' }
]
};
const bounceInRight = {
denominator: 4,
start: { opacity: '0', transform: 'translate3d(3000px, 0, 0)', offset: 0 },
steps: [
{ opacity: '1', transform: 'translate3d(-25px, 0, 0)', offset: 0.6 },
{ transform: 'translate3d(10px, 0, 0)', offset: 0.75 },
{ transform: 'translate3d(-5px, 0, 0)', offset: 0.9 },
{ transform: 'translate3d(0, 0, 0)' }
]
};
const bounceInUp = {
denominator: 4,
start: { opacity: '0', transform: 'translate3d(0, 3000px, 0)', offset: 0 },
steps: [
{ opacity: '1', transform: 'translate3d(0, -25px, 0)', offset: 0.6 },
{ transform: 'translate3d(0, 10px, 0)', offset: 0.75 },
{ transform: 'translate3d(0, -5px, 0)', offset: 0.9 },
{ transform: 'translate3d(0, 0, 0)' }
]
};
const bounceOut = {
denominator: 3,
start: {},
steps: [
{ transform: 'scale3d(0.9, 0.9, 0.9', offset: 0.2 },
{ opacity: 1, transform: 'scale3d(1.1, 1.1, 1.1', offset: 0.55 },
{ opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3' }
]
};
const bounceOutDown = {
denominator: 3,
start: {},
steps: [
{ transform: 'translate3d(0, 10px, 0', offset: 0.2 },
{ opacity: 1, transform: 'translate3d(0, -20px, 0', offset: 0.45 },
{ opacity: 0, transform: 'translate3d(0, 2000px, 0' }
]
};
const bounceOutLeft = {
denominator: 2,
start: {},
steps: [
{ opacity: 1, transform: 'translate3d(20px, 0, 0', offset: 0.2 },
{ opacity: 0, transform: 'translate3d(-2000px, 0, 0' }
]
};
const bounceOutRight = {
denominator: 2,
start: {},
steps: [
{ opacity: 1, transform: 'translate3d(-20px, 0, 0', offset: 0.2 },
{ opacity: 0, transform: 'translate3d(2000px, 0, 0' }
]
};
const bounceOutUp = {
denominator: 3,
start: {},
steps: [
{ transform: 'translate3d(0, -10px, 0', offset: 0.2 },
{ opacity: 1, transform: 'translate3d(0, 20px, 0', offset: 0.45 },
{ opacity: 0, transform: 'translate3d(0, -2000px, 0' }
]
};
const bounce = {
denominator: 4,
start: {},
steps: [
{
transform: 'translate3d(0, -30px, 0)',
'animation-timing-function': 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
offset: 0.43
},
{
transform: 'translate3d(0, -15px, 0)',
'animation-timing-function': 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
offset: 0.7
},
{
transform: 'translate3d(0, -4px, 0)',
offset: 0.9
},
{
'animation-timing-function': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
transform: 'translate3d(0, 0, 0)',
offset: 1
}
]
};
const flash = {
denominator: 4,
start: { opacity: '1', offset: 0 },
steps: [
{ opacity: '0', offset: 0.25 },
{ opacity: '1', offset: 0.5 },
{ opacity: '0', offset: 0.75 },
{ opacity: '1', offset: 1 }
]
};
const headShake = {
denominator: 5,
start: { transform: 'translateX(0)', offset: 0 },
steps: [
{ transform: 'translateX(-6px) rotateY(-9deg)', offset: 0.06 },
{ transform: 'translateX(5px) rotateY(7deg)', offset: 0.18 },
{ transform: 'translateX(-3px) rotateY(-5deg)', offset: 0.31 },
{ transform: 'translateX(2px) rotateY(3deg)', offset: 0.43 },
{ transform: 'translateX(0)', offset: 0.5 }
]
};
const heartBeat = {
denominator: 5,
start: { transform: 'scale(1)', offset: 0 },
steps: [
{ transform: 'scale(1.3)', offset: 0.14 },
{ transform: 'scale(1)', offset: 0.28 },
{ transform: 'scale(1.3)', offset: 0.42 },
{ transform: 'scale(1)', offset: 0.7 }
]
};
const jello = {
denominator: 7,
start: { transform: 'translate3d(0, 0, 0)', offset: 0 },
steps: [
{ transform: 'skewX(-12.5deg) skewY(-12.5deg)', offset: 0.22 },
{ transform: 'skewX(6.25deg) skewY(6.25deg)', offset: 0.33 },
{ transform: 'skewX(-3.125deg) skewY(-3.125deg)', offset: 0.44 },
{ transform: 'skewX(1.5625deg) skewY(1.5625deg)', offset: 0.55 },
{
transform: 'skewX(-0.78125deg) skewY(-0.78125deg)',
offset: 0.66
},
{
transform: 'skewX(0.390625deg) skewY(0.390625deg)',
offset: 0.77
},
{
transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)',
offset: 0.88
}
]
};
const pulse = {
denominator: 2,
start: { transform: 'scale3d(1, 1, 1)', offset: 0 },
steps: [
{ transform: 'scale3d(1.05, 1.05, 1.05)', offset: 0.5 },
{ transform: 'scale3d(1, 1, 1)', offset: 1 }
]
};
const rubberBand = {
denominator: 6,
start: { transform: 'scale3d(1, 1, 1)', offset: 0 },
steps: [
{ transform: 'scale3d(1.25, 0.75, 1)', offset: 0.3 },
{ transform: 'scale3d(0.75, 1.25, 1)', offset: 0.4 },
{ transform: 'scale3d(1.15, 0.85, 1)', offset: 0.5 },
{ transform: 'scale3d(0.95, 1.05, 1)', offset: 0.65 },
{ transform: 'scale3d(1.05, 0.95, 1)', offset: 0.75 },
{ transform: 'scale3d(1, 1, 1)', offset: 1 }
]
};
const shake = {
denominator: 10,
start: { transform: 'translate3d(0, 0, 0)', offset: 0 },
steps: [
{ transform: 'translate3d(-10px, 0, 0)' },
{ transform: 'translate3d( 10px, 0, 0)' },
{ transform: 'translate3d(-10px, 0, 0)' },
{ transform: 'translate3d( 10px, 0, 0)' },
{ transform: 'translate3d(-10px, 0, 0)' },
{ transform: 'translate3d( 10px, 0, 0)' },
{ transform: 'translate3d(-10px, 0, 0)' },
{ transform: 'translate3d( 10px, 0, 0)' },
{ transform: 'translate3d(-10px, 0, 0)' },
{ transform: 'translate3d(0, 0, 0)' }
]
};
const swing = {
denominator: 10,
start: {},
steps: [
{ transform: 'rotate3d(0, 0, 1, 15deg)' },
{ transform: 'rotate3d(0, 0, 1, -10deg)' },
{ transform: 'rotate3d(0, 0, 1, 5deg)' },
{ transform: 'rotate3d(0, 0, 1, -5deg)' },
{ transform: 'rotate3d(0, 0, 1, 0deg)' }
]
};
const tada = {
denominator: 10,
start: { transform: 'scale3d(1, 1, 1)' },
steps: [
{ transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)' },
{ transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)' },
{ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
{ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
{ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
{ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
{ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
{ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)' },
{ transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)' },
{ transform: 'scale3d(1, 1, 1)' }
]
};
const wobble = {
denominator: 6,
start: { transform: 'translate3d(0, 0, 0)' },
steps: [
{ transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)' },
{ transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)' },
{ transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)' },
{ transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)' },
{ transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)' },
{ transform: 'translate3d(0, 0, 0)' }
]
};
const flip = {
denominator: 4,
start: {
transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)'
},
steps: [
{
transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)'
},
{
transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)'
},
{
transform: 'perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)'
},
{
transform: 'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)'
}
]
};
const flipInX = {
denominator: 4,
start: { transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)' },
steps: [
{ transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)' },
{ transform: 'perspective(400px) rotate3d(1, 0, 0, 10deg)' },
{ transform: 'perspective(400px) rotate3d(1, 0, 0, -5deg)' },
{ transform: 'perspective(400px)' }
]
};
const flipInY = {
denominator: 4,
start: { transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)' },
steps: [
{ transform: 'perspective(400px) rotate3d(0, 1, 0, -20deg)' },
{ transform: 'perspective(400px) rotate3d(0, 1, 0, 10deg)' },
{ transform: 'perspective(400px) rotate3d(0, 1, 0, -5deg)' },
{ transform: 'perspective(400px)' }
]
};
const flipOutX = {
denominator: 2,
start: { transform: 'perspective(400px)' },
steps: [
{ transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)' },
{ opacity: 0, transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)' }
]
};
const flipOutY = {
denominator: 2,
start: { transform: 'perspective(400px)' },
steps: [
{ transform: 'perspective(400px) rotate3d(0, 1, 0, -15deg)' },
{ opacity: 0, transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)' }
]
};
const lightSpeedIn = {
denominator: 4,
start: { opacity: '0', transform: 'translate3d(100%, 0, 0) skewX(-30deg)' },
steps: [
{ opacity: '1', transform: 'skewX(20deg)', offset: 0.6 },
{ transform: 'skewX(-5deg)', offset: 0.8 },
{ transform: 'translate3d(0, 0, 0)' }
]
};
const lightSpeedOut = {
denominator: 4,
start: { opacity: '1' },
steps: [{ opacity: '0', transform: 'translate3d(100%, 0, 0) skewX(30deg)' }]
};
const rotateIn = {
denominator: 2,
start: {
opacity: '0',
'transform-origin': 'center',
transform: 'rotate3d(0, 0, 1, -200deg)'
},
steps: [
{
opacity: '1',
'transform-origin': 'center',
transform: 'translate3d(0, 0, 0)'
}
]
};
const rotateInDownLeft = {
denominator: 2,
start: {
opacity: '0',
'transform-origin': 'left bottom',
transform: 'rotate3d(0, 0, 1, -45deg)'
},
steps: [
{
opacity: '1',
'transform-origin': 'left bottom',
transform: 'translate3d(0, 0, 0)'
}
]
};
const rotateInDownRight = {
denominator: 2,
start: {
opacity: '0',
'transform-origin': 'right bottom',
transform: 'rotate3d(0, 0, 1, 45deg)'
},
steps: [
{
opacity: '1',
'transform-origin': 'right bottom',
transform: 'translate3d(0, 0, 0)'
}
]
};
const rotateInUpLeft = {
denominator: 2,
start: {
opacity: '0',
'transform-origin': 'left bottom',
transform: 'rotate3d(0, 0, 1, 45deg)'
},
steps: [
{
opacity: '1',
'transform-origin': 'left bottom',
transform: 'translate3d(0, 0, 0)'
}
]
};
const rotateInUpRight = {
denominator: 2,
start: {
opacity: '0',
'transform-origin': 'right bottom',
transform: 'rotate3d(0, 0, 1, -90deg)'
},
steps: [
{
opacity: '1',
'transform-origin': 'right bottom',
transform: 'translate3d(0, 0, 0)'
}
]
};
const rotateOut = {
denominator: 2,
start: { opacity: '1', 'transform-origin': 'center' },
steps: [
{
opacity: '0',
'transform-origin': 'center',
transform: 'rotate3d(0, 0, 1, 200deg'
}
]
};
const rotateOutDownLeft = {
denominator: 2,
start: { opacity: '1', 'transform-origin': 'left bottom' },
steps: [
{
opacity: '0',
'transform-origin': 'left bottom',
transform: 'rotate3d(0, 0, 1, 45deg'
}
]
};
const rotateOutDownRight = {
denominator: 2,
start: { opacity: '1', 'transform-origin': 'right bottom' },
steps: [
{
opacity: '0',
'transform-origin': 'right bottom',
transform: 'rotate3d(0, 0, 1, -45deg'
}
]
};
const rotateOutUpLeft = {
denominator: 2,
start: { opacity: '1', 'transform-origin': 'left bottom' },
steps: [
{
opacity: '0',
'transform-origin': 'left bottom',
transform: 'rotate3d(0, 0, 1, -45deg'
}
]
};
const rotateOutUpRight = {
denominator: 2,
start: { opacity: '1', 'transform-origin': 'right bottom' },
steps: [
{
opacity: '0',
'transform-origin': 'right bottom',
transform: 'rotate3d(0, 0, 1, 90deg'
}
]
};
const slideInDown = {
denominator: 2,
start: { visibility: 'visible', transform: 'translate3d(0, -100%, 0' },
steps: [{ transform: 'translate3d(0, 0, 0' }]
};
const slideInLeft = {
denominator: 2,
start: { visibility: 'visible', transform: 'translate3d(-100%, 0, 0' },
steps: [{ transform: 'translate3d(0, 0, 0' }]
};
const slideInRight = {
denominator: 2,
start: { visibility: 'visible', transform: 'translate3d(100%, 0, 0' },
steps: [{ transform: 'translate3d(0, 0, 0' }]
};
const slideInUp = {
denominator: 2,
start: { visibility: 'visible', transform: 'translate3d(0, 100%, 0' },
steps: [{ transform: 'translate3d(0, 0, 0' }]
};
const slideOutDown = {
denominator: 2,
start: { transform: 'translate3d(0, 0, 0' },
steps: [{ visibility: 'hidden', transform: 'translate3d(0, 100%, 0' }]
};
const slideOutLeft = {
denominator: 2,
start: { transform: 'translate3d(0, 0, 0' },
steps: [{ visibility: 'hidden', transform: 'translate3d(-100%, 0, 0' }]
};
const slideOutRight = {
denominator: 2,
start: { transform: 'translate3d(0, 0, 0' },
steps: [{ visibility: 'hidden', transform: 'translate3d(100%, 0, 0' }]
};
const slideOutUp = {
denominator: 2,
start: { transform: 'translate3d(0, 0, 0' },
steps: [{ visibility: 'hidden', transform: 'translate3d(0, -100%, 0' }]
};
const hinge = {
denominator: 3,
start: {
'transform-origin': 'top left',
'animation-timing-function': 'ease-in-out'
},
steps: [
{
'transform-origin': 'top left',
'animation-timing-function': 'ease-in-out',
transform: 'rotate3d(0, 0, 1, 80deg)'
},
{
opacity: '1',
'transform-origin': 'top left',
'animation-timing-function': 'ease-in-out',
transform: 'rotate3d(0, 0, 1, 60deg)'
},
{
opacity: '0',
'transform-origin': 'top left',
'animation-timing-function': 'ease-in-out',
transform: 'translate3d(0, 700px, 0)'
}
]
};
const jackInTheBox = {
denominator: 3,
start: {
opacity: '0',
'transform-origin': 'center bottom',
transform: 'scale(0.1) rotate(30deg)'
},
steps: [
{ transform: 'rotate(-10deg)' },
{ transform: 'rotate(3deg)' },
{ opacity: '1', transform: 'scale(1)' }
]
};
const rollIn = {
denominator: 1,
start: {
opacity: '0',
transform: 'translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)'
},
steps: [{ opacity: '1', transform: 'translate3d(0, 0, 0)' }]
};
const rollOut = {
denominator: 1,
start: { opacity: '1' },
steps: [
{
opacity: '0',
transform: 'translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)'
}
]
};
const zoomIn = {
denominator: 1,
start: { opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)' },
steps: [{ opacity: '1', transform: 'scale3d(1, 1, 1)' }]
};
const zoomInDown = {
denominator: 1,
start: {
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)',
'animation-timing-function': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
},
steps: [
{
opacity: '1',
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
'animation-timing-function': 'cubic-bezier(0.175, 0.885, 0.32, 1)'
}
]
};
const zoomInLeft = {
denominator: 1,
start: {
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)',
'animation-timing-function': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
},
steps: [
{
opacity: '1',
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
'animation-timing-function': 'cubic-bezier(0.175, 0.885, 0.32, 1)'
}
]
};
const zoomInRight = {
denominator: 1,
start: {
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)',
'animation-timing-function': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
},
steps: [
{
opacity: '1',
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
'animation-timing-function': 'cubic-bezier(0.175, 0.885, 0.32, 1)'
}
]
};
const zoomInUp = {
denominator: 1,
start: {
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)',
'animation-timing-function': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)'
},
steps: [
{
opacity: '1',
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
'animation-timing-function': 'cubic-bezier(0.175, 0.885, 0.32, 1)'
}
]
};
const zoomOut = {
denominator: 1,
start: { opacity: '1' },
steps: [
{ opacity: '0', transform: 'scale3d(0.3, 0.3, 0.3)', offset: 0.5 },
{ opacity: '0' }
]
};
const zoomOutDown = {
denominator: 1,
start: {},
steps: [
{
opacity: '0.5',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 0, 0)',
'animation-timing-function': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
offset: 0.4
},
{
opacity: '0',
'transform-origin': 'center bottom',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0)',
'animation-timing-function': 'cubic-bezier(0.175, 0.885, 0.32, 1)'
}
]
};
const zoomOutLeft = {
denominator: 1,
start: {},
steps: [
{
opacity: '0.5',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)',
offset: 0.4
},
{
opacity: '0',
'transform-origin': 'left center',
transform: 'scale(0.1) translate3d(-2000px, 0, 0)'
}
]
};
const zoomOutRight = {
denominator: 1,
start: {},
steps: [
{
opacity: '0.5',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)',
offset: 0.4
},
{
opacity: '0',
'transform-origin': 'right center',
transform: 'scale(0.1) translate3d(2000px, 0, 0)'
}
]
};
const zoomOutUp = {
denominator: 1,
start: {},
steps: [
{
opacity: '0.5',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
'animation-timing-function': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
offset: 0.4
},
{
opacity: '0',
'transform-origin': 'center bottom',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0)',
'animation-timing-function': 'cubic-bezier(0.175, 0.885, 0.32, 1)'
}
]
};
const backInDown = {
denominator: 1,
start: { opacity: '0.7', transform: 'translateY(-1200px) scale(0.7)' },
steps: [
{ opacity: '0.7', transform: 'translateY(0px) scale(0.7)', offset: 0.8 },
{ opacity: '1', transform: 'scale(1)', offset: 1 }
]
};
const backInLeft = {
denominator: 1,
start: { opacity: '0.7', transform: 'translateX(-2000px) scale(0.7)' },
steps: [
{ opacity: '0.7', transform: 'translateX(0px) scale(0.7)', offset: 0.8 },
{ opacity: '1', transform: 'scale(1)', offset: 1 }
]
};
const backInRight = {
denominator: 1,
start: { opacity: '0.7', transform: 'translateX(2000px) scale(0.7)' },
steps: [
{ opacity: '0.7', transform: 'translateX(0px) scale(0.7)', offset: 0.8 },
{ opacity: '1', transform: 'scale(1)', offset: 1 }
]
};
const backInUp = {
denominator: 1,
start: { opacity: '0.7', transform: 'translateY(1200px) scale(0.7)' },
steps: [
{ opacity: '0.7', transform: 'translateY(0px) scale(0.7)', offset: 0.8 },
{ opacity: '1', transform: 'scale(1)', offset: 1 }
]
};
const backOutDown = {
denominator: 1,
start: { opacity: '1', transform: 'scale(1)' },
steps: [
{ opacity: '0.7', transform: 'translateY(0px) scale(0.7)', offset: 0.2 },
{ opacity: '0.7', transform: 'translateY(700px) scale(0.7)', offset: 1 }
]
};
const backOutLeft = {
denominator: 1,
start: { opacity: '1', transform: 'scale(1)' },
steps: [
{ opacity: '0.7', transform: 'translateX(0px) scale(0.7)', offset: 0.2 },
{ opacity: '0.7', transform: 'translateX(-2000px) scale(0.7)', offset: 1 }
]
};
const backOutRight = {
denominator: 1,
start: { opacity: '1', transform: 'scale(1)' },
steps: [
{ opacity: '0.7', transform: 'translateX(0px) scale(0.7)', offset: 0.2 },
{ opacity: '0.7', transform: 'translateX(2000px) scale(0.7)', offset: 1 }
]
};
const backOutUp = {
denominator: 1,
start: { opacity: '1', transform: 'scale(1)' },
steps: [
{ opacity: '0.7', transform: 'translateY(0px) scale(0.7)', offset: 0.2 },
{ opacity: '0.7', transform: 'translateY(-700px) scale(0.7)', offset: 1 }
]
};
function stylesToAnimation(animationDefinition) {
return (time) => [
style(animationDefinition.start),
...animationDefinition.steps.map(_ => animate(time / animationDefinition.denominator, style(_)))
];
}
const animations = {
bounce: stylesToAnimation(bounce),
flash: stylesToAnimation(flash),
headShake: stylesToAnimation(headShake),
heartBeat: stylesToAnimation(heartBeat),
pulse: stylesToAnimation(pulse),
rubberBand: stylesToAnimation(rubberBand),
shake: stylesToAnimation(shake),
swing: stylesToAnimation(swing),
tada: stylesToAnimation(tada),
wobble: stylesToAnimation(wobble),
jello: stylesToAnimation(jello),
bounceIn: stylesToAnimation(bounceIn),
bounceInDown: stylesToAnimation(bounceInDown),
bounceInLeft: stylesToAnimation(bounceInLeft),
bounceInRight: stylesToAnimation(bounceInRight),
bounceInUp: stylesToAnimation(bounceInUp),
bounceOut: stylesToAnimation(bounceOut),
bounceOutDown: stylesToAnimation(bounceOutDown),
bounceOutLeft: stylesToAnimation(bounceOutLeft),
bounceOutRight: stylesToAnimation(bounceOutRight),
bounceOutUp: stylesToAnimation(bounceOutUp),
fadeIn: stylesToAnimation(fadeIn),
fadeInDown: stylesToAnimation(fadeInDown),
fadeInDownBig: stylesToAnimation(fadeInDownBig),
fadeInLeft: stylesToAnimation(fadeInLeft),
fadeInLeftBig: stylesToAnimation(fadeInLeftBig),
fadeInRight: stylesToAnimation(fadeInRight),
fadeInRightBig: stylesToAnimation(fadeInRightBig),
fadeInUp: stylesToAnimation(fadeInUp),
fadeInUpBig: stylesToAnimation(fadeInUpBig),
fadeOut: stylesToAnimation(fadeOut),
fadeOutDown: stylesToAnimation(fadeOutDown),
fadeOutDownBig: stylesToAnimation(fadeOutDownBig),
fadeOutLeft: stylesToAnimation(fadeOutLeft),
fadeOutLeftBig: stylesToAnimation(fadeOutLeftBig),
fadeOutRight: stylesToAnimation(fadeOutRight),
fadeOutRightBig: stylesToAnimation(fadeOutRightBig),
fadeOutUp: stylesToAnimation(fadeOutUp),
fadeOutUpBig: stylesToAnimation(fadeOutUpBig),
flip: stylesToAnimation(flip),
flipInX: stylesToAnimation(flipInX),
flipInY: stylesToAnimation(flipInY),
flipOutX: stylesToAnimation(flipOutX),
flipOutY: stylesToAnimation(flipOutY),
lightSpeedIn: stylesToAnimation(lightSpeedIn),
lightSpeedOut: stylesToAnimation(lightSpeedOut),
rotateIn: stylesToAnimation(rotateIn),
rotateInDownLeft: stylesToAnimation(rotateInDownLeft),
rotateInDownRight: stylesToAnimation(rotateInDownRight),
rotateInUpLeft: stylesToAnimation(rotateInUpLeft),
rotateInUpRight: stylesToAnimation(rotateInUpRight),
rotateOut: stylesToAnimation(rotateOut),
rotateOutDownLeft: stylesToAnimation(rotateOutDownLeft),
rotateOutDownRight: stylesToAnimation(rotateOutDownRight),
rotateOutUpLeft: stylesToAnimation(rotateOutUpLeft),
rotateOutUpRight: stylesToAnimation(rotateOutUpRight),
slideInUp: stylesToAnimation(slideInUp),
slideInDown: stylesToAnimation(slideInDown),
slideInLeft: stylesToAnimation(slideInLeft),
slideInRight: stylesToAnimation(slideInRight),
slideOutUp: stylesToAnimation(slideOutUp),
slideOutDown: stylesToAnimation(slideOutDown),
slideOutLeft: stylesToAnimation(slideOutLeft),
slideOutRight: stylesToAnimation(slideOutRight),
zoomIn: stylesToAnimation(zoomIn),
zoomInDown: stylesToAnimation(zoomInDown),
zoomInLeft: stylesToAnimation(zoomInLeft),
zoomInRight: stylesToAnimation(zoomInRight),
zoomInUp: stylesToAnimation(zoomInUp),
zoomOut: stylesToAnimation(zoomOut),
zoomOutDown: stylesToAnimation(zoomOutDown),
zoomOutLeft: stylesToAnimation(zoomOutLeft),
zoomOutRight: stylesToAnimation(zoomOutRight),
zoomOutUp: stylesToAnimation(zoomOutUp),
hinge: stylesToAnimation(hinge),
jackInTheBox: stylesToAnimation(jackInTheBox),
rollIn: stylesToAnimation(rollIn),
rollOut: stylesToAnimation(rollOut),
backInDown: stylesToAnimation(backInDown),
backInLeft: stylesToAnimation(backInLeft),
backInRight: stylesToAnimation(backInRight),
backInUp: stylesToAnimation(backInUp),
backOutDown: stylesToAnimation(backOutDown),
backOutLeft: stylesToAnimation(backOutLeft),
backOutRight: stylesToAnimation(backOutRight),
backOutUp: stylesToAnimation(backOutUp)
};
class AnimationsService {
constructor(_builder) {
this._builder = _builder;
this.animations = animations;
}
create(animation, element) {
return this._builder.build(animation).create(element);
}
addAnimations(customAnimations) {
customAnimations.forEach(animation => this.add(animation.name, animation.animation));
}
add(name, animation) {
if (this.animations[name] !== undefined) {
throw new Error('There is already an animation named ' + name);
}
this.animations[name] = stylesToAnimation(animation);
}
}
AnimationsService.decorators = [
{ type: Injectable }
];
AnimationsService.ctorParameters = () => [
{ type: AnimationBuilder }
];
class AnimIfDirective {
constructor(templateRef, viewContainer, _animationsService) {
this.templateRef = templateRef;
this.viewContainer = viewContainer;
this._animationsService = _animationsService;
this.shownBefore = false;
}
set animIf(show) {
this.show = show;
this._animIfDirty = true;
}
/**
* Applies the changes when needed.
*/
ngDoCheck() {
if (this._animIfDirty) {
this._animIfDirty = false;
if (this.subscription) {
this.subscription.unsubscribe();
}
if (this.show && !this.shownBefore) {
this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.templateRef);
const player = this.createPlayer(this.animIfInfo.startAnim, this.animIfInfo.time);
player.play();
this.shownBefore = true;
}
if (!this.show && this.shownBefore) {
const player = this.createPlayer(this.animIfInfo.endAnim, this.animIfInfo.time);
player.play();
this.clearAfterTime(this.viewContainer, this.animIfInfo.time);
this.shownBefore = false;
}
}
}
createPlayer(animation, time) {
return this._animationsService.create(this._animationsService.animations[animation](time), this.viewContainer.get(0).rootNodes[0]);
}
clearAfterTime(viewContainer, time) {
this.subscription = timer(time).subscribe(() => {
viewContainer.clear();
});
}
}
AnimIfDirective.decorators = [
{ type: Directive, args: [{
selector: '[animIf]'
},] }
];
AnimIfDirective.ctorParameters = () => [
{ type: TemplateRef },
{ type: ViewContainerRef },
{ type: AnimationsService }
];
AnimIfDirective.propDecorators = {
animIfInfo: [{ type: Input }],
animIf: [{ type: Input }]
};
class AnimatedDirective {
constructor(el, _animationsService) {
this.el = el;
this._animationsService = _animationsService;
this.time = 300;
this.animation = 'fadeIn';
}
set animAted(options) {
if (options) {
this.time = options.time || this.time;
this.animation = options.animation || this.animation;
}
}
animate(options) {
let player;
if (options !== undefined) {
player = this.createPlayer(options.animation || this.animation, options.time || this.time);
}
else {
player = this.createPlayer(this.animation, this.time);
}
player.play();
player.onDone(() => __awaiter(this, void 0, void 0, function* () {
const time = options !== undefined ? options.time || this.time : this.time;
yield timer(time).toPromise();
player.reset();
}));
}
createPlayer(animation, time) {
return this._animationsService.create(this._animationsService.animations[animation](time), this.el.nativeElement);
}
}
AnimatedDirective.decorators = [
{ type: Directive, args: [{
selector: '[animAted]',
exportAs: 'animated'
},] }
];
AnimatedDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: AnimationsService }
];
AnimatedDirective.propDecorators = {
animAted: [{ type: Input }]
};
class NgxAnimationsModule {
}
NgxAnimationsModule.decorators = [
{ type: NgModule, args: [{
declarations: [AnimIfDirective, AnimatedDirective],
imports: [CommonModule],
providers: [AnimationsService],
exports: [AnimIfDirective, AnimatedDirective]
},] }
];
class AnimationDefinition {
constructor(start, steps, denominator = 1) {
this.start = start;
this.steps = steps;
this.denominator = denominator;
}
}
/*
* Build route transition that can be used in the @Component animations
* Usage Example :
* @Component({
* selector: 'my-app',
* templateUrl: './app.component.html',
* styleUrls: ['./app.component.css'],
* animations: [
* buildRouteTransition({ stateChangeExpr: '* => *',
* enter: animations.bounceIn(200),
* leave: animations.bounceOut(200)})
* ]
* })
*/
function buildRouteTransition(options = {}) {
return transition(options.stateChangeExpr || '* => *', [
query(':enter', [style({ opacity: 0, position: 'absolute' })], { optional: true }),
query(':leave', [style({ position: 'absolute' }), ...(options.leave || animations.bounceOut(200))], {
optional: true
}),
query(':enter', [style({ position: 'absolute' }), ...(options.enter || animations.bounceIn(200))], {
optional: true
})
]);
}
/**
* Generated bundle index. Do not edit.
*/
export { AnimIfDirective, AnimatedDirective, AnimationDefinition, AnimationsService, NgxAnimationsModule, animations, backInDown, backInLeft, backInRight, backInUp, backOutDown, backOutLeft, backOutRight, backOutUp, bounce, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, buildRouteTransition, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flash, flip, flipInX, flipInY, flipOutX, flipOutY, headShake, heartBeat, hinge, jackInTheBox, jello, lightSpeedIn, lightSpeedOut, pulse, rollIn, rollOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, rubberBand, shake, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp, stylesToAnimation, swing, tada, wobble, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, bounce as ɵa, flash as ɵb, fadeInRight as ɵba, fadeInRightBig as ɵbb, fadeInUp as ɵbc, fadeInUpBig as ɵbd, fadeOut as ɵbe, fadeOutDown as ɵbf, fadeOutDownBig as ɵbg, fadeOutLeft as ɵbh, fadeOutLeftBig as ɵbi, fadeOutRight as ɵbj, fadeOutRightBig as ɵbk, fadeOutUp as ɵbl, fadeOutUpBig as ɵbm, flip as ɵbn, flipInX as ɵbo, flipInY as ɵbp, flipOutX as ɵbq, flipOutY as ɵbr, lightSpeedIn as ɵbs, lightSpeedOut as ɵbt, rotateIn as ɵbu, rotateInDownLeft as ɵbv, rotateInDownRight as ɵbw, rotateInUpLeft as ɵbx, rotateInUpRight as ɵby, rotateOut as ɵbz, headShake as ɵc, rotateOutDownLeft as ɵca, rotateOutDownRight as ɵcb, rotateOutUpLeft as ɵcc, rotateOutUpRight as ɵcd, slideInUp as ɵce, slideInDown as ɵcf, slideInLeft as ɵcg, slideInRight as ɵch, slideOutUp as ɵci, slideOutDown as ɵcj, slideOutLeft as ɵck, slideOutRight as ɵcl, zoomIn as ɵcm, zoomInDown as ɵcn, zoomInLeft as ɵco, zoomInRight as ɵcp, zoomInUp as ɵcq, zoomOut as ɵcr, zoomOutDown as ɵcs, zoomOutLeft as ɵct, zoomOutRight as ɵcu, zoomOutUp as ɵcv, hinge as ɵcw, jackInTheBox as ɵcx, rollIn as ɵcy, rollOut as ɵcz, heartBeat as ɵd, backInDown as ɵda, backInLeft as ɵdb, backInRight as ɵdc, backInUp as ɵdd, backOutDown as ɵde, backOutLeft as ɵdf, backOutRight as ɵdg, backOutUp as ɵdh, pulse as ɵe, rubberBand as ɵf, shake as ɵg, swing as ɵh, tada as ɵi, wobble as ɵj, jello as ɵk, bounceIn as ɵl, bounceInDown as ɵm, bounceInLeft as ɵn, bounceInRight as ɵo, bounceInUp as ɵp, bounceOut as ɵq, bounceOutDown as ɵr, bounceOutLeft as ɵs, bounceOutRight as ɵt, bounceOutUp as ɵu, fadeIn as ɵv, fadeInDown as ɵw, fadeInDownBig as ɵx, fadeInLeft as ɵy, fadeInLeftBig as ɵz };
//# sourceMappingURL=ngx-animations.js.map