0
votes

Animation Angular travaillant uniquement en faux état

J'ai une animation en Fadein angulaire / Fadeout, ce travail normalement avant de mettre à niveau le V6 angulaire à V7. Mon code:

    <div [@hideShowAnimator]="abreNotificacoes" id="cardNotificacao" class="card">


   ...

<i (click)="abreNotificacoes = !abreNotificacoes"></i>

angular css

0 commentaires

3 Réponses :

0
votes

Utilisez la propriété de visibilité à la place, et si vous souhaitez vous débarrasser de l'espace occupé par le conteneur, définissez la propriété Hauteur sur 0 et vice versa.

<div style="display: flex; flex-direction: row;">
  <ul>
    <i (click)="toggle()">Click</i>
  </ul>
  <div [@hideShowAnimator]="abreNotificacoes" id="cardNotificacao" class="card">
    <img src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
  </div>
</div>

2 commentaires

Si j'utilise la visibilité: caché, mon élément caché mais l'espace de l'élément persiste sur mon écran. C'est pourquoi j'ai besoin d'afficher: Aucun, comment je peux résoudre ce problème?

@hilorena définit la propriété Hauteur sur 0. Et quand visible, revenez à la hauteur souhaitée.

0
votes

Le problème est Affichage: "Aucun" code>. Si vous changez que sur Block CODE>, cela fonctionne comme prévu, mais l'avoir à Aucun code> signifie qu'il ne sera affiché qu'après la transition parce que le style CSS avec opacité: x , Affichage: 'Aucun' code> où x code> est une valeur ne sera toujours jamais rendu.

animations: [
  trigger('hideShowAnimator', [
  state('true', style({ opacity: 1, display: 'block' })),
  state('false', style({ opacity: 0, display: 'block' })),
  transition('0 => 1', animate('200ms ease-in')),
  transition('1 => 0', animate('200ms ease-out'))
])],

1 commentaires

Si j'utilise la visibilité: caché, mon élément caché mais l'espace de l'élément persiste sur mon écran. C'est pourquoi j'ai besoin d'afficher: Aucun, comment je peux résoudre ce problème?

0
votes

Je pense que l'affichage: aucun ne pourrait être le problème. Il vaut mieux utiliser * NGIF fourni par angulaire.

  <div [@hideShowAnimator] id="cardNotificacao" class="card" *ngIf="abreNotificacoes">


   ...

<i (click)="abreNotificacoes = !abreNotificacoes"></i>

2 commentaires

Si j'utilise * NGIF avec l'animation, le NGIF cache instantanément mon élément

Avez-vous importé la navigateur de navigateur dans votre app.Module?