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。