SCSS Transition d'opacité fondu enchaîné

Question

J'ajoute dynamiquement des classes à une table en fonction du moment du chargement ou du chargement de ces données.

J'ai:

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

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

Utilisé par:

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

Le problème est, si les charges de données trop rapidement, la classe .loaded est appliquée et sauts d'opacité à 0, plutôt que de commencer à partir de quand .loading l'a quitté.

Comment puis-je faire en sorte que cela commence à s'estomper d'où la classe précédente s'est arrêtée?

Answer 1

vous pouvez essayer la transition au lieu de l'animation comme si

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

    &.loading { 
    opacity: 0.3; 
    } 
} 

lorsque vous démarrez le chargement de données ajouter la classe « de chargement » à « tr » si une transition commencera à l'opacité: 1 à l'opacité: 0,3; et quand les données finissent de charger, il suffit de retirer la classe "loading", elle retournera à son opacité d'origine