SCSS Opazitätsübergang Überblendung

Question

Ich füge Klassen dynamisch zu einer Tabelle hinzu, basierend auf dem Zeitpunkt, zu dem diese Daten geladen oder geladen werden.

ich habe:

@keyframes row-loading { 
    0% { 
    opacity: 1.0; 
    } 
    100% { 
    opacity: 0.3; 
    } 
} 

@keyframes row-loaded { 
    0% { 
    opacity: 0.3; 
    } 
    100% { 
    opacity: 1.0; 
    } 
} 

Verwendet von:

tr { 
     height: 45px; 
     &.loading { 
     -webkit-animation: row-loading 0.8s; 
     -webkit-animation-fill-mode: forwards; 
     } 
     &.loaded { 
     -webkit-animation: row-loaded 0.8s; 
     } 
... 

Das Problem ist, wenn die Daten Lasten zu schnell, wird die .loaded Klasse angewendet und Opazität springt auf 0, anstatt Start ab wann .loading verließ es.

Wie bekomme ich das, um von dort, wo die vorherige Klasse aufgehört hat, einzublenden?

Answer 1

Sie können Übergang versuchen statt Animation wie so

tr { 
    height: 45px; 
    opacity:1; 
    transition: opacity 0.8s; 

    &.loading { 
    opacity: 0.3; 
    } 
} 

beim Laden von Daten beginnen „Laden“ Klasse hinzufügen „tr“ so ein Übergang zur Undurchsichtigkeit beginnen: 1 bis Opazität: 0,3; und wenn die Daten fertig geladen sind, entfernen Sie einfach die "Lade" -Klasse und kehren zu ihrer ursprünglichen Opazität zurück