jqueryのCSSアニメーションのプロパティ

Question

JSの乱数を生成して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>