javascript - 如何创建稀有度高的动画与经常出现的动画一起出现？

Question

如何制作稀有度高的动画与常出现的动画一起出现？

这里的例子:

数字1 出现的几率很小，比方说40% 的几率。当它不出现时，它将以 2 开始，然后在 2 的动画完成后 3 将开始。

如果 1 成功了，它会出现并向上移动，在动画完成后，2 会播放，然后在 2 之后， 3 会玩。所以他们只是作为例子融入其中。

2 和 3 总是会出现，但是 1 有 40% 的几率出现​​，例如。在 3 上，我设法在其上设置了一个随机背景机会。我已经在代码中对其进行了评论。

如果 1 不出现，那么它应该表现得像 display: none。但是，当我将 display: none 放在 box1 上时，动画永远不会开始，或者它开始了但我看不到它，但我把它放在了关键帧中。

我的想法是，我猜它需要 Javascript 才能更改 animation-delay CSS 属性，但我不确定。

这是我目前所拥有的:https://jsfiddle.net/edy3xjvz/2/

var box1 = document.getElementById("box1"); /* The one with the rarity */

var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3"); /* Maybe give it a chance of which color */

var boxes = document.getElementById("boxes");

var box3Colors = {"blue": 90, "red": 50}; /* Blue has 90% chance and red has 50% not sure if done right, but what if I want to add a "green" with the chance of 90% too like "blue"???  */


/* Probably has to be done here, or when reaching a certain area, maybe with a button */
/*document.onload*/

var btn = document.getElementById("btn");
btn.addEventListener("click", startAnimation);

boxes.style.display = "none";

function randomizerWithChances(input) {
    var array = [];
    for(var item in input) {
        if ( input.hasOwnProperty(item) ) {
            for( var i=0; i<input[item]; i++ ) {
                array.push(item);
            }
        }
    }
    return array[Math.floor(Math.random() * array.length)];
}


/* Start Animation */
function startAnimation() {
	boxes.style.display = "none"; /* to replay but doesn't work*/
  
	/* Do radomize stuff */
  /* Don't really know for box1 */
  
 
  /* I've tried box3, like that before
  var random2 = box3Colors[Math.floor(Math.random() * box3Colors.length)]
  box3.style.backgroundColor = random2;*/
  box3.style.backgroundColor = randomizerWithChances(box3Colors);

	/* Animation starts here */
	boxes.style.display = "block";
}

#boxes {
  
}

.box {
  display: inline-block;
  position: relative;
  height: 50px;
  width: 50px;
  margin-left: 20px;
}

#box1 {background: #00afe8;}
#box2 {background: green;}
#box3 {background: blue;}

@keyframes box1-up {
  0% { top: 70px; position: relative; visibility: visible;}
  100% {top: 0px; position: relative; visibility: visible;}
}

@keyframes blend {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


#box1 {
  top: 70px;
  /* display: none; Can't start with this I wanted that when it isn't there, it should not appear but with display: none it didn't work because it can never appear then */
  /*position: absolute; visibility: hidden;*/ /* So had to use this but when using this
                                             it didn't work the box is somehow upside 
                                             https://i.imgur.com/3vER5ja.png so not sure */
  animation: box1-up 2s;
  animation-fill-mode: forwards;
}


#box2 {
  opacity: 0;
  animation: blend 3s;
  animation-fill-mode: forwards;
  animation-delay: 3s;
}

#box3 {
  opacity: 0;
  animation: blend 3s;
  animation-fill-mode: forwards;
  animation-delay: 5s;
}

<div id="boxes">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3" class="box"></div>
</div>


<button id="btn" style="margin-top: 200px;">Start Animation</button> 

下面应该有一个按钮。我试过的是为 box3 背景色添加一个随机化器，似乎有效。我尝试使用 box1 但 display: none 损坏了它。

我试图做一些事情，当动画根本没有开始时，box2 就像不在这里一样，但是当我使用 display: none 时，动画永远不会开始不知道为什么。 https://jsfiddle.net/edy3xjvz/3/

然后我将其删除，这就是您在上面的代码片段中看到的内容。 https://jsfiddle.net/edy3xjvz/4/

Answer 1

这是一个快速的 PoC，说明如果我正确理解您的描述，它在没有 box1 的情况下如何表现，这样如果 active 类存在，它看起来就像您拥有的那样，如果没有然后给出等效于 display: none 的错觉，希望它能有所帮助，干杯。

const box1 = document.getElementById('box1');

toggleActive = () => {
  let classes = box1.classList;
  classes.contains('active') ? classes.remove('active') : classes.add('active');
}

.container {
  display: inline-block;
  outline: lightgray 1px dashed;
  padding: 1rem;
  margin: 1rem;
}

.container div {
  display: inline-block;
  height: 5rem;
  width: 5rem;
  background-color: lime;
  opacity: 0;
  animation: reveal 3s ease forwards;
}

.container div:nth-child(2) {
  animation-delay: 1s;
}

.container div:nth-child(3) {
  animation-delay: 2s;
}

.container div:not(:last-child) {
  margin-right: 1rem;
}

#box1 {
  height: 0;
  width: 0;
  margin: 0;
  transform: translateY(6rem);
  transition: transform 1s ease;
}

#box1.active {
  height: 5rem;
  width: 5rem;
  margin-right: 1rem;
  animation: revealUp 2s ease forwards;
}

@keyframes reveal {
  to { opacity: 1 }
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="container">
  <div id="box1" class="active"></div>
  <div id="box2"></div>
  <div id="box3"></div>
</div>

<br/>

<button onclick="toggleActive()">Toggle First One</button>