diff --git a/static/usage/v7/animations/basic/angular/example_component_ts.md b/static/usage/v7/animations/basic/angular/example_component_ts.md index e8a1dae1af8..117dd07dcbd 100644 --- a/static/usage/v7/animations/basic/angular/example_component_ts.md +++ b/static/usage/v7/animations/basic/angular/example_component_ts.md @@ -1,17 +1,18 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md index 36a7e22081a..32c5089fdcb 100644 --- a/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md @@ -1,40 +1,48 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - const card = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .duration(2000) - .beforeStyles({ - filter: 'invert(75%)', - }) - .beforeClearStyles(['box-shadow']) - .afterStyles({ - 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', - }) - .afterClearStyles(['filter']) - .keyframes([ - { offset: 0, transform: 'scale(1)' }, - { offset: 0.5, transform: 'scale(1.5)' }, - { offset: 1, transform: 'scale(1)' }, - ]); - - this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + const cardEl = this.cardElements.get(0); + + const card = cardEl + ? this.animationCtrl + .create() + .addElement(cardEl.nativeElement) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]) + : null; + + if (card) { + this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + } } play() { diff --git a/static/usage/v7/animations/chain/angular/example_component_ts.md b/static/usage/v7/animations/chain/angular/example_component_ts.md index 6c6acbef993..cb81d2e30d9 100644 --- a/static/usage/v7/animations/chain/angular/example_component_ts.md +++ b/static/usage/v7/animations/chain/angular/example_component_ts.md @@ -1,73 +1,85 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private cardA: Animation; - private cardB: Animation; - private cardC: Animation; + private cardA!: Animation | null; + private cardB!: Animation | null; + private cardC!: Animation | null; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - this.cardA = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1) rotate(0)' }, - { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0)' }, - ]); + const cardElA = this.cardElements.get(0); + const cardElB = this.cardElements.get(1); + const cardElC = this.cardElements.get(2); - this.cardB = this.animationCtrl - .create() - .addElement(this.cardElements.get(1).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '1' }, - { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, - { offset: 1, transform: 'scale(1)', opacity: '1' }, - ]); + this.cardA = cardElA + ? this.animationCtrl + .create() + .addElement(cardElA.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]) + : null; - this.cardC = this.animationCtrl - .create() - .addElement(this.cardElements.get(2).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '0.5' }, - { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, - { offset: 1, transform: 'scale(1)', opacity: '0.5' }, - ]); + this.cardB = cardElB + ? this.animationCtrl + .create() + .addElement(cardElB.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]) + : null; + + this.cardC = cardElC + ? this.animationCtrl + .create() + .addElement(cardElC.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]) + : null; } async play() { - await this.cardA.play(); - await this.cardB.play(); - await this.cardC.play(); + await this.cardA?.play(); + await this.cardB?.play(); + await this.cardC?.play(); } pause() { - this.cardA.pause(); - this.cardB.pause(); - this.cardC.pause(); + this.cardA?.pause(); + this.cardB?.pause(); + this.cardC?.pause(); } - stop() { - this.cardA.stop(); - this.cardB.stop(); - this.cardC.stop(); + async stop() { + await this.cardA?.stop(); + await this.cardB?.stop(); + await this.cardC?.stop(); } } ``` diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md index 7b9aadccf5e..49bb9e92f64 100644 --- a/static/usage/v7/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md @@ -1,18 +1,19 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import { AnimationController, GestureController, IonCard } from '@ionic/angular'; -import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation, Gesture, GestureDetail } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; - private gesture: Gesture; + private animation!: Animation; + private gesture!: Gesture; private started = false; private initialStep = 0; diff --git a/static/usage/v7/animations/group/angular/example_component_ts.md b/static/usage/v7/animations/group/angular/example_component_ts.md index 63f7a7b2f7a..607b9e9cdcd 100644 --- a/static/usage/v7/animations/group/angular/example_component_ts.md +++ b/static/usage/v7/animations/group/angular/example_component_ts.md @@ -1,33 +1,35 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { const cardA = this.animationCtrl .create() - .addElement(this.cardElements.get(0).nativeElement) + .addElement(this.cardElements.get(0)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1) rotate(0)' }, { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0) ' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, ]); const cardB = this.animationCtrl .create() - .addElement(this.cardElements.get(1).nativeElement) + .addElement(this.cardElements.get(1)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '1' }, { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, @@ -36,7 +38,7 @@ export class ExampleComponent { const cardC = this.animationCtrl .create() - .addElement(this.cardElements.get(2).nativeElement) + .addElement(this.cardElements.get(2)!.nativeElement) .duration(5000) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '0.5' }, @@ -48,7 +50,7 @@ export class ExampleComponent { .create() .duration(2000) .iterations(Infinity) - .addAnimation([cardA, cardB, cardC]); + .addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]); } play() { diff --git a/static/usage/v7/animations/keyframes/angular/example_component_ts.md b/static/usage/v7/animations/keyframes/angular/example_component_ts.md index 4ee04bea423..88bc548bd60 100644 --- a/static/usage/v7/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v7/animations/keyframes/angular/example_component_ts.md @@ -1,16 +1,18 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v7/animations/modal-override/angular/example_component_ts.md b/static/usage/v7/animations/modal-override/angular/example_component_ts.md index b1fe997c1d4..85a6a5f9b3b 100644 --- a/static/usage/v7/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v7/animations/modal-override/angular/example_component_ts.md @@ -1,14 +1,24 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import type { IonModal } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import { + AnimationController, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { - @ViewChild('modal', { static: true }) modal: IonModal; + @ViewChild('modal', { static: true }) modal!: IonModal; constructor(private animationCtrl: AnimationController) {} @@ -16,18 +26,22 @@ export class ExampleComponent { const enterAnimation = (baseEl: HTMLElement) => { const root = baseEl.shadowRoot; + const backdropElement = root?.querySelector('ion-backdrop'); + const wrapperElement = root?.querySelector('.modal-wrapper'); + const backdropAnimation = this.animationCtrl .create() - .addElement(root.querySelector('ion-backdrop')) + .addElement(backdropElement || baseEl) .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); - const wrapperAnimation = this.animationCtrl - .create() - .addElement(root.querySelector('.modal-wrapper')) - .keyframes([ + const wrapperAnimation = this.animationCtrl.create(); + + if (wrapperElement) { + wrapperAnimation.addElement(wrapperElement).keyframes([ { offset: 0, opacity: '0', transform: 'scale(0)' }, { offset: 1, opacity: '0.99', transform: 'scale(1)' }, ]); + } return this.animationCtrl .create() diff --git a/static/usage/v7/animations/preference-based/angular/example_component_ts.md b/static/usage/v7/animations/preference-based/angular/example_component_ts.md index c0e383d5ec0..98b3a8d4119 100644 --- a/static/usage/v7/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v7/animations/preference-based/angular/example_component_ts.md @@ -1,18 +1,18 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { AnimationController, IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v7/modal/styling/animations/angular/example_component_ts.md b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md index c4a743b2745..acfb6a412ca 100644 --- a/static/usage/v7/modal/styling/animations/angular/example_component_ts.md +++ b/static/usage/v7/modal/styling/animations/angular/example_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; -import { AnimationController } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', diff --git a/static/usage/v8/animations/basic/angular/example_component_ts.md b/static/usage/v8/animations/basic/angular/example_component_ts.md index e8a1dae1af8..eef9ba4482c 100644 --- a/static/usage/v8/animations/basic/angular/example_component_ts.md +++ b/static/usage/v8/animations/basic/angular/example_component_ts.md @@ -1,17 +1,19 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md index 36a7e22081a..84ca1f2a479 100644 --- a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md +++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md @@ -1,40 +1,49 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - const card = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .duration(2000) - .beforeStyles({ - filter: 'invert(75%)', - }) - .beforeClearStyles(['box-shadow']) - .afterStyles({ - 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', - }) - .afterClearStyles(['filter']) - .keyframes([ - { offset: 0, transform: 'scale(1)' }, - { offset: 0.5, transform: 'scale(1.5)' }, - { offset: 1, transform: 'scale(1)' }, - ]); - - this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + const cardEl = this.cardElements.get(0); + + const card = cardEl + ? this.animationCtrl + .create() + .addElement(cardEl.nativeElement) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]) + : null; + + if (card) { + this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + } } play() { diff --git a/static/usage/v8/animations/chain/angular/example_component_ts.md b/static/usage/v8/animations/chain/angular/example_component_ts.md index 6c6acbef993..ac8959f5fa4 100644 --- a/static/usage/v8/animations/chain/angular/example_component_ts.md +++ b/static/usage/v8/animations/chain/angular/example_component_ts.md @@ -1,73 +1,86 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private cardA: Animation; - private cardB: Animation; - private cardC: Animation; + private cardA!: Animation | null; + private cardB!: Animation | null; + private cardC!: Animation | null; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { - this.cardA = this.animationCtrl - .create() - .addElement(this.cardElements.get(0).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1) rotate(0)' }, - { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0)' }, - ]); + const cardElA = this.cardElements.get(0); + const cardElB = this.cardElements.get(1); + const cardElC = this.cardElements.get(2); - this.cardB = this.animationCtrl - .create() - .addElement(this.cardElements.get(1).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '1' }, - { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, - { offset: 1, transform: 'scale(1)', opacity: '1' }, - ]); + this.cardA = cardElA + ? this.animationCtrl + .create() + .addElement(cardElA.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]) + : null; - this.cardC = this.animationCtrl - .create() - .addElement(this.cardElements.get(2).nativeElement) - .fill('none') - .duration(1000) - .keyframes([ - { offset: 0, transform: 'scale(1)', opacity: '0.5' }, - { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, - { offset: 1, transform: 'scale(1)', opacity: '0.5' }, - ]); + this.cardB = cardElB + ? this.animationCtrl + .create() + .addElement(cardElB.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]) + : null; + + this.cardC = cardElC + ? this.animationCtrl + .create() + .addElement(cardElC.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]) + : null; } async play() { - await this.cardA.play(); - await this.cardB.play(); - await this.cardC.play(); + await this.cardA?.play(); + await this.cardB?.play(); + await this.cardC?.play(); } pause() { - this.cardA.pause(); - this.cardB.pause(); - this.cardC.pause(); + this.cardA?.pause(); + this.cardB?.pause(); + this.cardC?.pause(); } - stop() { - this.cardA.stop(); - this.cardB.stop(); - this.cardC.stop(); + async stop() { + await this.cardA?.stop(); + await this.cardB?.stop(); + await this.cardC?.stop(); } } ``` diff --git a/static/usage/v8/animations/gesture/angular/example_component_ts.md b/static/usage/v8/animations/gesture/angular/example_component_ts.md index 7b9aadccf5e..49bb9e92f64 100644 --- a/static/usage/v8/animations/gesture/angular/example_component_ts.md +++ b/static/usage/v8/animations/gesture/angular/example_component_ts.md @@ -1,18 +1,19 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import { AnimationController, GestureController, IonCard } from '@ionic/angular'; -import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation, Gesture, GestureDetail } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; - private gesture: Gesture; + private animation!: Animation; + private gesture!: Gesture; private started = false; private initialStep = 0; diff --git a/static/usage/v8/animations/group/angular/example_component_ts.md b/static/usage/v8/animations/group/angular/example_component_ts.md index 63f7a7b2f7a..a75e3041da0 100644 --- a/static/usage/v8/animations/group/angular/example_component_ts.md +++ b/static/usage/v8/animations/group/angular/example_component_ts.md @@ -1,33 +1,36 @@ ```ts import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} ngAfterViewInit() { const cardA = this.animationCtrl .create() - .addElement(this.cardElements.get(0).nativeElement) + .addElement(this.cardElements.get(0)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1) rotate(0)' }, { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, - { offset: 1, transform: 'scale(1) rotate(0) ' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, ]); const cardB = this.animationCtrl .create() - .addElement(this.cardElements.get(1).nativeElement) + .addElement(this.cardElements.get(1)!.nativeElement) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '1' }, { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, @@ -36,7 +39,7 @@ export class ExampleComponent { const cardC = this.animationCtrl .create() - .addElement(this.cardElements.get(2).nativeElement) + .addElement(this.cardElements.get(2)!.nativeElement) .duration(5000) .keyframes([ { offset: 0, transform: 'scale(1)', opacity: '0.5' }, @@ -48,7 +51,7 @@ export class ExampleComponent { .create() .duration(2000) .iterations(Infinity) - .addAnimation([cardA, cardB, cardC]); + .addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]); } play() { diff --git a/static/usage/v8/animations/keyframes/angular/example_component_ts.md b/static/usage/v8/animations/keyframes/angular/example_component_ts.md index 4ee04bea423..d6739439d97 100644 --- a/static/usage/v8/animations/keyframes/angular/example_component_ts.md +++ b/static/usage/v8/animations/keyframes/angular/example_component_ts.md @@ -1,16 +1,19 @@ ```ts import { Component, ElementRef, ViewChild } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v8/animations/modal-override/angular/example_component_ts.md b/static/usage/v8/animations/modal-override/angular/example_component_ts.md index b1fe997c1d4..21dd0d187c5 100644 --- a/static/usage/v8/animations/modal-override/angular/example_component_ts.md +++ b/static/usage/v8/animations/modal-override/angular/example_component_ts.md @@ -1,14 +1,24 @@ ```ts import { Component, ViewChild } from '@angular/core'; -import type { IonModal } from '@ionic/angular'; -import { AnimationController } from '@ionic/angular'; +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { - @ViewChild('modal', { static: true }) modal: IonModal; + @ViewChild('modal', { static: true }) modal!: IonModal; constructor(private animationCtrl: AnimationController) {} @@ -16,18 +26,22 @@ export class ExampleComponent { const enterAnimation = (baseEl: HTMLElement) => { const root = baseEl.shadowRoot; + const backdropElement = root?.querySelector('ion-backdrop'); + const wrapperElement = root?.querySelector('.modal-wrapper'); + const backdropAnimation = this.animationCtrl .create() - .addElement(root.querySelector('ion-backdrop')) + .addElement(backdropElement || baseEl) .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); - const wrapperAnimation = this.animationCtrl - .create() - .addElement(root.querySelector('.modal-wrapper')) - .keyframes([ + const wrapperAnimation = this.animationCtrl.create(); + + if (wrapperElement) { + wrapperAnimation.addElement(wrapperElement).keyframes([ { offset: 0, opacity: '0', transform: 'scale(0)' }, { offset: 1, opacity: '0.99', transform: 'scale(1)' }, ]); + } return this.animationCtrl .create() diff --git a/static/usage/v8/animations/preference-based/angular/example_component_ts.md b/static/usage/v8/animations/preference-based/angular/example_component_ts.md index c0e383d5ec0..40e672d5850 100644 --- a/static/usage/v8/animations/preference-based/angular/example_component_ts.md +++ b/static/usage/v8/animations/preference-based/angular/example_component_ts.md @@ -1,18 +1,19 @@ ```ts -import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; -import type { QueryList } from '@angular/core'; -import type { Animation } from '@ionic/angular'; -import { AnimationController, IonCard } from '@ionic/angular'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular/standalone'; +import type { Animation } from '@ionic/angular/standalone'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['./example.component.css'], + imports: [IonButton, IonCard, IonCardContent], }) export class ExampleComponent { - @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; - private animation: Animation; + private animation!: Animation; constructor(private animationCtrl: AnimationController) {} diff --git a/static/usage/v8/modal/styling/animations/angular/example_component_ts.md b/static/usage/v8/modal/styling/animations/angular/example_component_ts.md index c4a743b2745..acfb6a412ca 100644 --- a/static/usage/v8/modal/styling/animations/angular/example_component_ts.md +++ b/static/usage/v8/modal/styling/animations/angular/example_component_ts.md @@ -1,6 +1,6 @@ ```ts import { Component } from '@angular/core'; -import { AnimationController } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular/standalone'; @Component({ selector: 'app-example',