CSS-Animationseigenschaft in Jquery

Question

Also ich möchte eine Zufallszahl in JS zu verketten innerhalb der CSS-Animation-Eigenschaft, so dass es eine zufällige Zeit Eigenschaft hat.

Wie Sie sich vorstellen können, handelt es sich bei meinem Code-Snippet um einen Preloader. Ich will es eine zufällige Zeit haben (von 2 bis 8 Sekunden lang)

$(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

Sie sind nicht eine Zeiteinheit auf Ihrer Animation Dauer anhängen. Sie könnten entweder ms mit "animation": "load " + rnd + "ms linear" zuweisen (siehe, wie ich Leerzeichen zwischen den Variablen belassen) oder Sie können Ihre rnd Variable teilen, da sie Werte in Tausend ausgibt und s bis "animation": "load " + rnd/1000 + "s linear" verwenden.

Wenn dies nicht funktioniert, geben Sie bitte eine MCV example an und wir helfen Ihnen weiter.

EDIT: Überprüfen Sie dies, ich habe Ihr Code-Snippet aktualisiert. Das Problem war, dass .css(property, value) und keine Funktion wie Sie gesendet haben.

$(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>