Je souhaite désactiver l'animation de l'onglet de tapis du matériau angulaire (l'animation qui se produit lorsque le contenu glisse en place). Je sais qu'il est possible d'utiliser l'attribut [@ .disabled] mais je me demande s'il est possible d'obtenir le même effet avec du css pur.
EDIT:
Notre équipe UX veut supprimer la diapositive l'animation à partir des onglets de matériaux car ils pensent qu'ils ne sont pas appropriés pour une raison quelconque. Nous avons plusieurs projets qui peuvent utiliser plusieurs fois le composant onglets, nous voulions donc un moyen de supprimer cette animation pour les onglets actuels et ceux à venir. Idéalement, nous ne voulons pas dire aux gens d'ajouter (et de commencer à ajouter) des attributs à leurs HTML (ils peuvent oublier de le faire). En outre, ces projets ont comme dépendance un projet qui fournit les principaux styles css. L'idée était de supprimer ces animations dans la feuille de style css principale qui est partagée entre tous les projets. Nous avons essayé d'ajouter ce qui suit, mais cela n'a pas fonctionné:
.mat-tab-body-content, .mat-tab-body, .mat-tab-body-wrapper {
transition: none !important;
transform: none !important;
animation-duration: 0ms !important;
}
3 Réponses :
Le matériau angulaire ne fournit pas de moyen officiel de remplacer les animations, donc je ne le suggérerais pas à moins que vous n'en ayez vraiment besoin (vous devrez faire des hacks sales pour cela). En regardant votre cas, il est inutile d'écraser le CSS car vous pouvez obtenir le même résultat en appliquant animationDuration à mat-tab-group - ce qui serait également être une solution officielle.
import { MAT_TABS_CONFIG } from '@angular/material';
@NgModule({
...
providers: [
{ provide: MAT_TABS_CONFIG, useValue: { animationDuration: '0ms' } }
]
})
Si vous souhaitez appliquer des modifications globalement à chaque groupe d'onglets de votre projet, vous devrez injecter MAT_TABS_CONFIG
app.module.ts
<mat-tab-group animationDuration="0ms"> <mat-tab label="First">Content 1</mat-tab> <mat-tab label="Second">Content 2</mat-tab> <mat-tab label="Third">Content 3</mat-tab> </mat-tab-group>
Salut Dino, merci pour la réponse. Existe-t-il un CSS équivalent à cela?
@cfr Pas officiellement. Vous auriez à faire des hacks sales pour y parvenir avec CSS. Pourquoi voulez-vous utiliser la solution CSS s'il existe une solution officielle qui couvre votre problème?
J'essaie de supprimer l'animation pour chaque groupe d'onglets utilisé dans un grand projet, sans avoir à créer un composant personnalisé ou à dire à tout le monde d'ajouter un certain attribut à leur html. Ce projet utilise une feuille de style css principale que j'ai pensé que je pourrais utiliser pour y parvenir: /
@cfr Il existe une meilleure solution officielle pour cela. Vérifier ma modification
J'ai essayé ce que vous suggérez et cela ne fonctionne pas, cela me donne une erreur qui dit que "MAT_TABS_CONFIG" n'a pas de membres exportés, j'utilise angular 5
@ ararb78 Je me trompe peut-être mais je pense que MAT_TABS_CONFIG a été ajouté avec Angular Material 7. Vous pouvez vérifier le code source pour voir s'il est là.
@Dino, j'utilise @ angular / material @ 5.0.0-rc0 dans muy proyect, que pourriez-vous faire à la place?, J'utilise mat-tab-group et le saut entre les onglets prend beaucoup de temps dans Internet Explorer
vous pouvez également utiliser le code ci-dessous pour désactiver l'animation:
<div [@.disabled]="true">
<mat-tab-group >
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
</div>
https://stackblitz.com/edit/angular-ns4vi5?file=app%2Ftab-group-basic-example.html
Joli. Celui-ci aide à désactiver l'animation entre les changements de contenu. Mais ne fait pas l'affaire pour l'animation de la bordure inférieure des onglets.
Pour désactiver l'animation entre les changements de contenu, j'ai utilisé la solution @ me-sa:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.mat-tab-group *{
transition: none!important;
transition-duration: 0ms!important;
transition-delay: 0ms!important;
}
}
@supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
.mat-tab-group *{
transition: none!important;
transition-duration: 0ms!important;
transition-delay: 0ms!important;
}
}
Et j'ai travaillé, merci!
En ce qui concerne l'animation de la bordure des onglets de tapis, ceci a fait l'affaire pour moi:
<div [@.disabled]="true">
<mat-tab-group >
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
</div>
Il vaudrait mieux que vous décriviez votre problème réel. Peut-être que faire ce que vous essayez n'est pas la meilleure approche. Voir problèmes XY .
Notre équipe UX souhaite supprimer l'animation des diapositives des onglets de matériaux car elle pense qu'elle n'est pas appropriée pour une raison quelconque. Nous avons plusieurs projets qui peuvent utiliser plusieurs fois le composant onglets, nous voulions donc un moyen de supprimer cette animation pour les onglets actuels et ceux à venir. Idéalement, nous ne voulons pas dire aux gens d'ajouter (et de commencer à ajouter) des attributs à leurs HTML (ils peuvent oublier de le faire). En outre, ces projets ont comme dépendance un projet qui fournit les principaux styles css.
L'idée était de supprimer ces animations dans la feuille de style css principale qui est partagée entre tous les projets. Nous avons essayé d'ajouter ce qui suit, mais cela n'a pas fonctionné: `` `` .mat-tab-body-content, .mat-tab-body, .mat-tab-body-wrapper {transition: none! Important; transformer: aucun! important; durée de l'animation: 0ms! important; } `` `
De nouvelles informations vont dans votre question, s'il vous plaît.