Angular 4 composants responsive animations

Question

Je travaille sur une application sensible angulaire, qui sur mobile, il a un tiroir. J'adore l'implémentation de l'API Web Animations dans Angular, mais je ne trouve pas d'endroit où je peux configurer des animations basées sur mes points d'arrêt de requêtes média. Tout ce que je peux trouver c'est annuler les animations via ma feuille de css, mais cela me fait commencer à étaler le code sur différents endroits de mon projet, et je ne suis pas sûr que ce soit ce que l'angulaire que je voulais faire. ..

exemple la vraie vie

Mon tiroir d'application utilise ce code pour animer

<div class="mobile-menu" [@animateDrawer]="drawerOpened"> 
    <!-- Drawer's menu goes here --> 
</div> 

drawerOpened est un booléen qui bascule lorsque vous appuyez sur le bouton du menu de l'application.

Mon élément ressemble à ça:

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.scss'], 
    animations: [ 
    trigger('animateDrawer', [ 
     state('inactive', style({ 
     transform: 'translate3d(-100%, 0, 0)' 
     })), 
     state('active', style({ 
     transform: 'translate3d(0, 0, 0)' 
     })) 
    ]) 
    ] 
}) 

Le code CSS où j'annule les effets des animations

.mobile-menu{ 
    opacity: 1 !important; 
    display: flex !important; 
    transform: none !important; 
} 

En plus de manipuler tous dans mon code css & désactiver le css propriétés sur Desktop BreakPoint, existe-t-il un moyen de le faire dans le contexte angulaire?

Merci!

Answer 1

Il n'existe aucun moyen de définir un comportement JavaScript basé sur les requêtes CSS @Media. Vous devrez faire ce que j'ai fait, où j'ai créé un service d'apparence angulaire qui surveille les dimensions de la fenêtre et envoie des commandes aux composants en fonction de ce qui est détecté. Vous pouvez ensuite contrôler les animations et l'apparence avec la logique JavaScript au lieu de la logique CSS.

Ajout d'un exemple:

Créer un service qui surveille la largeur de la fenêtre. Si la fenêtre est inférieure à, disons, 500px, le service sort "mobile", sinon, il sort "desktop".

Dans votre composant, déclarez un déclencheur, nous l'appellerons @slide, avec plusieurs états. Nous allons également définir une variable privée appelée stateOfYourChoosing, et vous pouvez le définir en une chaîne.

Ensuite, dans votre modèle

<div [@slide]="stateOfYourChoosing"></div> 

Vous pouvez alors choisir quel état vous voulez que l'état par défaut de stateOfYourChoosing être, et comment vous voulez que votre composant transition basé sur la logique des composants. Ainsi, si votre service d'apparence affiche "desktop", votre état par défaut OOYourChoosing serait "slideOut"."

transition('slideOut => slideIn', animate('100ms ease-in')) 

Si les sorties de service apparence "mobiles", il met stateOfYourChoosing à "mobileSlideOut" et votre code de transition est au lieu

transition('mobileSlideOut => mobileSlideIn', animate('100ms ease-in')) 

Vous pouvez alors contrôler toutes vos animations sensibles dans vos animations module en contrôlant dans quel état se trouve votre déclencheur