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にジャンプした場合ローディングが終わってから。

どのようにして、以前のクラスが途切れていた場所からフェードインすることができますか？不透明度に1：

Answer 1

あなたはデータのロードを開始するときに、遷移の代わりに、そう

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

    &.loading { 
    opacity: 0.3; 
    } 
} 

のようなアニメーションを試すことができますので、遷移が不透明に開始されます「TR」を「ロード」クラスを追加0.3。データの読み込みが終了すると、「読み込み」クラスが削除され、元の不透明度に戻ります。