SCSS Переход прозрачности прозрачности

Question

Я динамически добавляю классы в таблицу на основе того, когда эти данные загружаются или загружаются.

у меня есть:

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

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

Используется:

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

Проблема в том, если загрузка данных слишком быстро, .loaded класс применяется и непрозрачности подскакивает до 0, а не начинать с момента загрузки.

Как я могу заставить это начать исчезать с того места, где остановился предыдущий класс?

Answer 1

вы можете попробовать переход вместо анимации, как так

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

    &.loading { 
    opacity: 0.3; 
    } 
} 

при запуске загрузки данных добавить класс «загрузки», чтобы «тр» так переход начнет непрозрачности: 1 непрозрачности: 0,3; и когда данные закончат загрузку, просто удалите класс «загрузка», он вернется к исходной непрозрачности