web-dev-qa-db-fra.com

Comment désactiver l'animation lors de l'ouverture d'un dialogue dans un matériau angulaire 2 avec un angulaire 4

J'essaie de créer la boîte de dialogue mais le problème est que je veux désactiver l'animation dans la boîte de dialogue afin de la désactiver.

angularangular-material
7
Omkar Yadav

Si vous souhaitez conserver vos animations sur votre application mais que vous pouvez désactiver celle qui est attachée à une boîte de dialogue, vous pouvez remplacer le conteneur de boîtes de dialogue par une seule et même contrôler et désactiver toutes les animations de ce conteneur.

Remplacer le composant OverlayContainer

  • Créer un OverlayContainer personnalisé qui étend celui du cdk

    import { OverlayContainer } from '@angular/cdk/overlay';

export class CustomOverlayContainer extends OverlayContainer {
    _defaultContainerElement: HTMLElement;

    constructor() {
        super();
    }

    public setContainer( container: HTMLElement ) {
        this._defaultContainerElement = this._containerElement;
        this._containerElement = container;
    }

    public restoreContainer() {
        this._containerElement = this._defaultContainerElement;
    }
}

  • Remplacer le cdk OverlayContainer par celui personnalisé sur les fournisseurs de modules d'applications

    export function initOverlay() {
    return new CustomOverlayContainer();
}
@NgModule( {
     ...
     providers: [
         ...
         {
             provide: OverlayContainer,
             useFactory: initOverlay
         }
         ...
     ]
     ...
})

Remplacer le wrapper de dialogue

Accédez au nouveau conteneur de dialogue et remplacez celui par défaut

export class AppComponent implements AfterViewInit {
    @ViewChild( 'dialogContainer' ) dialogContainer: ElementRef;

    constructor( private dialog: MatDialog, private overlayContainer: OverlayContainer ) {
    }

    ngAfterViewInit() {
        (this.overlayContainer as CustomOverlayContainer).setContainer( this.dialogContainer.nativeElement );

        this.dialog.open( ... );
    }
}

Désactiver les animations

Ajoutez la liaison [@.disabled] à votre conteneur afin de désactiver toutes les animations qui s'y déroulent. https://angular.io/api/animations/trigger#disable-animations

<div #dialogContainer [@.disabled]="true"></div>
4
Yuri G

vous pouvez désactiver en important 

NoopAnimationsModule

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})

plus d'infos https://material.angular.io/guide/getting-started

12
CharanRoot

Matériau angulaire 7 a une beaucoup animation plus agréable.

Cela devrait atténuer le problème pour la plupart des développeurs qui souhaitent le désactiver.

Il s'ouvre par le centre, en effectuant un zoom léger et sans glisser vers le haut ou le bas. À la fermeture, il disparaît instantanément. Il se comporte également bien sur les téléphones où la barre d’outils inférieure est initialement masquée.

Il devrait fonctionner beaucoup mieux avec des cartes graphiques moins performantes, des téléphones plus anciens ou des boîtes de dialogue avec un contenu complexe.

2
Simon_Weaver