Angular belebte nicht richtig funktionieren, wenn Sie vordefinierte CSS-Zustand zusätzlich zu dem Übergangszustand

Question

Betrachten Sie haben die folgende CSS

  /* starting animations */ 
      .error-animation.ng-enter { 

       -webkit-transition: 0.5s linear all; 
       transition: 0.5s linear all; 

       opacity: 0; 
      } 

      /* destination animations */ 
      .error-animation.ng-enter.ng-enter-active { 
       opacity: 0.7; 
      } 


      #my-error { 
       color: red; 
       margin-left: 10px; 
       margin-top: 10px; 
       opacity: 0.7 
      } 

Wenn mein html-Element die Animation Klasse und benutzerdefinierte ID enthält, die die gleiche Funktion haben. Der Übergang funktioniert für diese Funktion nicht.

  <div id="my-error" 
       ng-if="error" ng-cloak class="error-animation"> 
       Error 
      </div> 

In dem obigen Code die Funktion das Problem verursacht ist opacity

Mein ng-enter Zustand haben opacity: 0

Mein ng-enter-active Zustand hat opacity: 0.7

Mein Standardzustand hat opacity: 0.7

Weil das Der Standardzustand ist spezifischer als die ng-animate-Klasse, er überschreibt sie (die Animation funktioniert nicht).

jedoch das Dilemma ist, dass selbst wenn ich von opacity:0.7 im Default-Zustand losgeworden, wird es standardmäßig Opazität übernehmen ist 1 und Übergang zuerst von 0 zu 0.7 und 0.7 zu 1.

Kann mir jemand einen Einblick in die Lösung dieses Problems geben?

Hier ist ein kurzes Beispiel with

Answer 1

zu spielen Wenn das Element eine Standard-Opazität definiert hat sich, wollen Sie diese verwendet werden? Oder möchten Sie, dass die Deckkraft der Fehleranimation immer Vorrang hat?

Sie können !important in der Animation versteckten Zustand hinzufügen:

.fade-in-out.ng-hide { 
    opacity: 0 !important; 
} 

Sie erhalten dann das folgende Verhalten bekommen.

• Wenn das Element es 0-0,7 animiert wird definiert keine Opazität hat und von 0,7 bis 0.
• Wenn das Element für die es 0-0,4 animiert wird definiert Beispiel 0,4 Opazität aufweist, und 0,4 bis 0.

Wenn Sie auch !important in der Animation gezeigt Zustand hinzufügen, die Elemente eigene Opazität ignoriert und 0,7 immer Vorrang haben:

.fade-in-out { 
    transition: 1s linear all; 
    opacity: 0.7 !important; 
}