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; 
    } 
} 

动画，当你开始加载数据添加“加载”类“TR”这样的转变将开始不透明度：1至不透明度：0.3;当数据完成加载时，只需删除“加载”类，它将返回到其原来的不透明度