jquery의 CSS 애니메이션 속성

Question

그래서 CSS에 랜덤 숫자를 생성하여 CSS 속성을 연결하여 임의의 시간 속성을 갖도록하려고합니다.

내 코드에서 볼 수 있듯이 이것은 프리 로더입니다. 임의의 시간 (2 ~ 8 초 길이)을 갖기를 원합니다.

$(window).load(function() { 

    var rnd = Math.random() * (8000 - 2000) + 2000; 

    $('.progress').css(function() { 
    "animation": "load" + rnd + "linear" 
    }); 

    setTimeout(function() { 

    $('#page').addClass('loaded'); 
    $('#page').removeClass('unloaded'); 
    $('#loader').hide(); 

    }, val); 

}); 

Answer 1

애니메이션 기간에 시간 단위가 추가되지 않습니다. "animation": "load " + rnd + "ms linear"을 사용하여 ms을 할당하거나 (변수 사이에 공백을 두는 방법 참조) 숫자를 수천 단위로 출력하므로 rnd 변수를 나눌 수 있으며 s에서 "animation": "load " + rnd/1000 + "s linear"까지 사용할 수 있습니다.

그래도 문제가 해결되지 않으면 MCV example을 제공해 주시면 자세히 알려 드리겠습니다.

편집 : 확인, 코드 스 니펫을 업데이트했습니다. 문제는 .css(property, value)이며 전송 한 기능이 아닙니다.

$(window).load(function() { 
 

 
    var rnd = Math.random() * (8000 - 2000) + 2000; 
 

 
    $('.progress').css("animation", "load " + rnd + "ms linear"); 
 

 
    setTimeout(function() { 
 

 
    $('#page').addClass('loaded'); 
 
    $('#page').removeClass('unloaded'); 
 
    $('#loader').hide(); 
 

 
    }, rnd); 
 

 
});

#page { 
 
    position: absolute; 
 
    background: rgb(240, 240, 240); 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#loader { 
 
    position: absolute; 
 
    top: calc(50% - 10px); 
 
    left: calc(25%); 
 
    width: 50%; 
 
} 
 

 
.progress { 
 
    width: 100%; 
 
    height: 20px; 
 
    background: #3498db; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 
.loaded { 
 
    opacity: 1; 
 
} 
 

 
.unloaded { 
 
    opacity: 0; 
 
} 
 

 
@keyframes load { 
 

 
    0% { 
 
    width: 0%; 
 
    } 
 

 
    25% { 
 
    width: 50%; 
 
    } 
 

 
    50% { 
 
    width: 60%; 
 
    } 
 

 
    90% { 
 
    width: 95%; 
 
    } 
 

 
    100% { 
 
    width: 100%; 
 
    } 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="loader"> 
 
    <div class="progress"></div> 
 
</div> 
 

 
<div id="page" class="unloaded"> 
 
Loaded result 
 
</div>