SVG 預加載器與 CSS animation 在每個頁面加載時隨機化

Question

所以我做了一個 svg 標志預加載器，也為它做了一些 css 動畫。 但我的主要問題是如何使用 javascript 在刷新/新頁面加載時使預加載器加載不同的 animation。 例如，在加載徽標的一個頁面上，應使用反彈 animation 並在頁面刷新或打開預加載器的另一個選項卡上使用我制作的旋轉 animation 等。

 var strings = [ 'animation1.', 'animation2.', 'animation3.' ]; var rand = strings[Math.floor(Math.random() * strings.length)]; document.getElementById('loading-animation').innerHTML = rand;

 .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: #ddd; padding-top: 200px; }.svg { display: block; width: 80px; height: 80px; background: #aaa; margin: 10px auto; }.animation1 { just an example }.animation2 { just an example }.animation2 { just an example }

 <div id="container" class='loading' > <div id='loading-animation' class='loading-animation'>Processing</div> <svg>just an example svg in inserted in the html, no external src link to it</svg> </div>

我很確定 .innerHTML 不應該存在，因為 javascript 文件將在頭部外部鏈接。 而且我知道我沒有鏈接所有使用的代碼，只是因為這里粘貼的代碼太多，所以我做了一個小例子，希望我能讓自己理解。 謝謝。

Answer 1

您可以使用 JavaScript 將 CSS class 隨機分配給要設置動畫的元素。 這是一個例子。

 var animationClasses = [ 'animation1', 'animation2', 'animation3' ]; var choosenAnimation = animationClasses[~~(Math.random() * animationClasses.length)]; document.getElementById('elementToAnimate').classList.add(choosenAnimation);

 @keyframes grow { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fly-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } }.animation1 { width: fit-content; animation: grow 1s; }.animation2 { animation: fade 1s; }.animation3 { animation: fly-down 1s; }

 <div id="elementToAnimate">This will get a random animation</div>

數組animationClasses中的隨機 class 被分配給elementToAnimate 。 每個 class 包含 CSS 用於不同的 animation，每次都允許隨機 Z6F1C25ED1523962F1BBF9DEE9ZBE500。