feat(entrance-animations): hide component before delay ends for entrance animations

filipows · filipows · commit 1ee0a76d6e34 · 2020-09-04T11:49:29.000+08:00
#58
diff --git a/lib/bouncing-entrances/bounce-in-down.animation.ts b/lib/bouncing-entrances/bounce-in-down.animation.ts
@@ -54,6 +54,7 @@ export function bounceInDownAnimation(options?: IBounceInDownAnimationOptions):
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(bounceInDown()),
diff --git a/lib/bouncing-entrances/bounce-in-left.animation.ts b/lib/bouncing-entrances/bounce-in-left.animation.ts
@@ -54,6 +54,7 @@ export function bounceInLeftAnimation(options?: IBounceInLeftAnimationOptions):
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(bounceInLeft()),
diff --git a/lib/bouncing-entrances/bounce-in-right.animation.ts b/lib/bouncing-entrances/bounce-in-right.animation.ts
@@ -54,6 +54,7 @@ export function bounceInRightAnimation(options?: IBounceInRightAnimationOptions)
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(bounceInRight()),
@@ -79,7 +80,6 @@ export function bounceInRightOnEnterAnimation(options?: IBounceInRightAnimationO
     transition(
       ':enter',
       [
-        // style({ background: 'red' }),
         style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
diff --git a/lib/bouncing-entrances/bounce-in-up.animation.ts b/lib/bouncing-entrances/bounce-in-up.animation.ts
@@ -54,6 +54,7 @@ export function bounceInUpAnimation(options?: IBounceInUpAnimationOptions): Anim
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(bounceInUp()),
diff --git a/lib/bouncing-entrances/bounce-in.animation.ts b/lib/bouncing-entrances/bounce-in.animation.ts
@@ -46,6 +46,7 @@ export function bounceInAnimation(options?: IAnimationOptions): AnimationTrigger
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(bounceIn()),
diff --git a/lib/fading-entrances/fade-in-down-big.animation.ts b/lib/fading-entrances/fade-in-down-big.animation.ts
@@ -41,6 +41,7 @@ export function fadeInDownBigAnimation(options?: IFadeInDownBigAnimationOptions)
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(fadeInDownBig()),
diff --git a/lib/fading-entrances/fade-in-down.animation.ts b/lib/fading-entrances/fade-in-down.animation.ts
@@ -41,6 +41,7 @@ export function fadeInDownAnimation(options?: IFadeInDownAnimationOptions): Anim
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(fadeInDown()),
diff --git a/lib/fading-entrances/fade-in-left-big.animation.ts b/lib/fading-entrances/fade-in-left-big.animation.ts
@@ -41,6 +41,7 @@ export function fadeInLeftBigAnimation(options?: IFadeInLeftBigAnimationOptions)
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(fadeInLeftBig()),
diff --git a/lib/fading-entrances/fade-in-left.animation.ts b/lib/fading-entrances/fade-in-left.animation.ts
@@ -41,6 +41,7 @@ export function fadeInLeftAnimation(options?: IFadeInLeftAnimationOptions): Anim
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(fadeInLeft()),
diff --git a/lib/fading-entrances/fade-in-right-big.animation.ts b/lib/fading-entrances/fade-in-right-big.animation.ts
@@ -41,6 +41,7 @@ export function fadeInRightBigAnimation(options?: IFadeInRightBigAnimationOption
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(fadeInRightBig()),
diff --git a/lib/fading-entrances/fade-in-right.animation.ts b/lib/fading-entrances/fade-in-right.animation.ts
@@ -41,6 +41,7 @@ export function fadeInRightAnimation(options?: IFadeInRightgAnimationOptions): A
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(fadeInRight()),
diff --git a/lib/fading-entrances/fade-in-up-big.animation.ts b/lib/fading-entrances/fade-in-up-big.animation.ts
@@ -41,6 +41,7 @@ export function fadeInUpBigAnimation(options?: IFadeInUpBigAnimationOptions): An
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(fadeInUpBig()),
diff --git a/lib/fading-entrances/fade-in-up.animation.ts b/lib/fading-entrances/fade-in-up.animation.ts
@@ -41,6 +41,7 @@ export function fadeInUpAnimation(options?: IFadeInUpAnimationOptions): Animatio
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(fadeInUp()),
diff --git a/lib/fading-entrances/fade-in.animation.ts b/lib/fading-entrances/fade-in.animation.ts
@@ -29,6 +29,7 @@ export function fadeInAnimation(options?: IAnimationOptions): AnimationTriggerMe
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(fadeIn()),
diff --git a/lib/flippers/flip-in-x.animation.ts b/lib/flippers/flip-in-x.animation.ts
@@ -50,6 +50,7 @@ export function flipInXAnimation(options?: IFlipInXAnimationOptions): AnimationT
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           style({ 'backface-visibility': 'visible' }),
diff --git a/lib/flippers/flip-in-y.animation.ts b/lib/flippers/flip-in-y.animation.ts
@@ -50,6 +50,7 @@ export function flipInYAnimation(options?: IFlipInYAnimationOptions): AnimationT
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           style({ 'backface-visibility': 'visible' }),
diff --git a/lib/light-speed/light-speed-in.animation.ts b/lib/light-speed/light-speed-in.animation.ts
@@ -49,6 +49,7 @@ export function lightSpeedInAnimation(options?: ILightSpeedInAnimationOptions):
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(lightSpeedIn()),
diff --git a/lib/rotating-entrances/rotate-in-down-left.animation.ts b/lib/rotating-entrances/rotate-in-down-left.animation.ts
@@ -41,6 +41,7 @@ export function rotateInDownLeftAnimation(options?: IRotateInDownLeftAnimationOp
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         style({ 'transform-origin': 'left bottom' }),
         group([
diff --git a/lib/rotating-entrances/rotate-in-down-right.animation.ts b/lib/rotating-entrances/rotate-in-down-right.animation.ts
@@ -41,6 +41,7 @@ export function rotateInDownRightAnimation(options?: IRotateInDownRightAnimation
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         style({ 'transform-origin': 'right bottom' }),
         group([
diff --git a/lib/rotating-entrances/rotate-in-up-left.animation.ts b/lib/rotating-entrances/rotate-in-up-left.animation.ts
@@ -41,6 +41,7 @@ export function rotateInUpLeftAnimation(options?: IRotateInUpLeftAnimationOption
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         style({ 'transform-origin': 'left bottom' }),
         group([
diff --git a/lib/rotating-entrances/rotate-in-up-right.animation.ts b/lib/rotating-entrances/rotate-in-up-right.animation.ts
@@ -41,6 +41,7 @@ export function rotateInUpRightAnimation(options?: IRotateInUpRightAnimationOpti
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         style({ 'transform-origin': 'right bottom' }),
         group([
diff --git a/lib/rotating-entrances/rotate-in.animation.ts b/lib/rotating-entrances/rotate-in.animation.ts
@@ -41,6 +41,7 @@ export function rotateInAnimation(options?: IRotateInAnimationOptions): Animatio
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         style({ 'transform-origin': 'center' }),
         group([
diff --git a/lib/sliding-entrances/slide-in-down.animation.ts b/lib/sliding-entrances/slide-in-down.animation.ts
@@ -41,6 +41,7 @@ export function slideInDownAnimation(options?: ISlideInDownAnimationOptions): An
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           style({ visibility: 'visible' }),
diff --git a/lib/sliding-entrances/slide-in-left.animation.ts b/lib/sliding-entrances/slide-in-left.animation.ts
@@ -41,6 +41,7 @@ export function slideInLeftAnimation(options?: ISlideInLeftAnimationOptions): An
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           style({ visibility: 'visible' }),
diff --git a/lib/sliding-entrances/slide-in-right.animation.ts b/lib/sliding-entrances/slide-in-right.animation.ts
@@ -41,6 +41,7 @@ export function slideInRightAnimation(options?: ISlideInRightAnimationOptions):
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           style({ visibility: 'visible' }),
diff --git a/lib/sliding-entrances/slide-in-up.animation.ts b/lib/sliding-entrances/slide-in-up.animation.ts
@@ -41,6 +41,7 @@ export function slideInUpAnimation(options?: ISlideInUpAnimationOptions): Animat
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           style({ visibility: 'visible' }),
diff --git a/lib/specials/jack-in-the-box.animation.ts b/lib/specials/jack-in-the-box.animation.ts
@@ -40,6 +40,7 @@ export function jackInTheBoxAnimation(options?: IAnimationOptions): AnimationTri
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(jackInTheBox()),
diff --git a/lib/specials/roll-in.animation.ts b/lib/specials/roll-in.animation.ts
@@ -53,6 +53,7 @@ export function rollInAnimation(options?: IRollInAnimationOptions): AnimationTri
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(rollIn()),
diff --git a/lib/zooming-entrances/zoom-in-down.animation.ts b/lib/zooming-entrances/zoom-in-down.animation.ts
@@ -44,6 +44,7 @@ export function zoomInDownAnimation(options?: IAnimationOptions): AnimationTrigg
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(zoomInDown()),
diff --git a/lib/zooming-entrances/zoom-in-left.animation.ts b/lib/zooming-entrances/zoom-in-left.animation.ts
@@ -44,6 +44,7 @@ export function zoomInLeftAnimation(options?: IAnimationOptions): AnimationTrigg
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(zoomInLeft()),
diff --git a/lib/zooming-entrances/zoom-in-right.animation.ts b/lib/zooming-entrances/zoom-in-right.animation.ts
@@ -44,6 +44,7 @@ export function zoomInRightAnimation(options?: IAnimationOptions): AnimationTrig
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(zoomInRight()),
diff --git a/lib/zooming-entrances/zoom-in-up.animation.ts b/lib/zooming-entrances/zoom-in-up.animation.ts
@@ -44,6 +44,7 @@ export function zoomInUpAnimation(options?: IAnimationOptions): AnimationTrigger
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(zoomInUp()),
diff --git a/lib/zooming-entrances/zoom-in.animation.ts b/lib/zooming-entrances/zoom-in.animation.ts
@@ -42,6 +42,7 @@ export function zoomInAnimation(options?: IAnimationOptions): AnimationTriggerMe
     transition(
       '0 => 1',
       [
+        style({ visibility: 'hidden' }),
         ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
         group([
           useAnimation(zoomIn()),

Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,7 @@ export function bounceInDownAnimation(options?: IBounceInDownAnimationOptions):`
`54`	`54`	`transition(`
`55`	`55`	`'0 => 1',`
`56`	`56`	`[`
	`57`	`+ style({ visibility: 'hidden' }),`
`57`	`58`	`...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),`
`58`	`59`	`group([`
`59`	`60`	`useAnimation(bounceInDown()),`
Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,7 @@ export function bounceInAnimation(options?: IAnimationOptions): AnimationTrigger`
`46`	`46`	`transition(`
`47`	`47`	`'0 => 1',`
`48`	`48`	`[`
	`49`	`+ style({ visibility: 'hidden' }),`
`49`	`50`	`...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),`
`50`	`51`	`group([`
`51`	`52`	`useAnimation(bounceIn()),`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ export function fadeInDownBigAnimation(options?: IFadeInDownBigAnimationOptions)`
`41`	`41`	`transition(`
`42`	`42`	`'0 => 1',`
`43`	`43`	`[`
	`44`	`+ style({ visibility: 'hidden' }),`
`44`	`45`	`...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),`
`45`	`46`	`group([`
`46`	`47`	`useAnimation(fadeInDownBig()),`