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는"그래서 전환이 불투명으로 시작됩니다에 "로딩"클래스를 추가 시작할 때 당신이 그렇게

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

    &.loading { 
    opacity: 0.3; 
    } 
} 

같은 전환 대신에 애니메이션을 시도 할 수 있습니다 : 1 불투명 : 0.3; 데이터로드가 완료되면 "loading"클래스를 제거하면 원래의 불투명도로 돌아갑니다.