javascript - 带有 CSS 动画的 SVG 预加载器，在每个页面加载时随机化

Question

所以我制作了一个 svg Logo 预加载器，还为其制作了一些 css 动画。但我的主要问题是如何让预加载器在刷新/使用 JavaScript 加载新页面时加载不同的动画。例如，在加载 Logo 的一个页面上应使用弹跳动画，在页面刷新时或在打开预加载器的另一个选项卡上应使用我制作的旋转动画等。

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 文件将在 head 部分中进行外部链接。我知道我没有链接所有使用的代码，因为这里粘贴的代码太多，所以我做了一个小例子，希望我能让自己理解。谢谢。

Answer 1

您可以使用 JavaScript 为要设置动画的元素随机分配 CSS 类。这是一个例子。

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 中的随机类被分配给 elementToAnimate。每个类都包含不同动画的 CSS，每次都允许随机动画。