如何一个接一个地执行动画。 JavaScript的

Question

我遇到运行函数的问题，所以我想为每个div运行动画。但是在第1和第2分区之间我希望有3秒的延迟。到目前为止，他们正在同时进行，所以我改变他们开始z位置。现在动画看起来像它应该但是..我需要JavaScript来更好地控制。有人在吗？ FIDDLE

JavaScript的：

var example = document.getElementsByClassName("example");

for (let i = 0; i < example.length; i++)
{ 
   setInterval(() => move(i), 2000);
}

function move(i){
    var str = getComputedStyle(example[i]).getPropertyValue('transform-origin');
    var res = str.split(" ");
     var pos = res[2].replace(/px/g, " ");
   var id= setInterval(frame,20);
  function frame(){
        pos++;
        example[i].style.transformOrigin = "50% 50%"+pos+"px";

}
  }

Answer 1

您可以将setInterval包裹在setTimeout中，其中包含可变延迟i * 3000

setTimeout将在执行前等待（i * 3000毫秒）。

第一个div将立即显示0 * 3000 = 0s，第二个显示在3s ( 1 * 3000 = 3s之后，第三个显示在6s ( 2 * 3000 = 6s )之后

setTimeout(function(){
    var id = setInterval(frame,  i ); 
}, i * 3000)

我不知道改变z位置的意思，但这里有一个小提琴你可以玩：https://fiddle.jshell.net/uqww2k26/85/

＆＃13;

＆＃13;

var example = document.getElementsByClassName("example");

for (let i = 0; i < example.length; i++)
{ 
	 move(i);
}

function move(i){
	var str = getComputedStyle(example[i]).getPropertyValue('transform-origin');
	var res = str.split(" ");
	var pos = res[2].replace(/px/g, " ");
  
  setTimeout(function(){
  	setInterval(frame,  i ); 
  }, i * 3000)
  
  function frame(){
 		pos++;
 		example[i].style.transformOrigin = "50% 50% "+pos+"px";
	}
}

＆＃13;

body {
  display: inline-block;
  background-color: black;
  box-sizing: border-box;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.example {
  display: inline-block;
  position: absolute;
  width: 100%;
  font-size: 50px;
  overflow: hidden;
  white-space: nowrap;
  
}
#background{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
}
.example:nth-child(2n+0) {  
  
  margin-left: 30px;
}
.example:nth-child(3){
transform: perspective(50px);
transform-origin: 50% 50% -300px;
top:40%;
}
.example:nth-child(2){
transform: perspective(50px);
transform-origin: 50% 50% -250px;
top:20%;
}
.example:nth-child(1){
transform: perspective(50px);
transform-origin: 50% 50% -200px;
}


.background {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-style: solid;

}

.num {
  display: inline-block;
  color: orange;
  width: 50px;
  height: 50px;
  text-align: center;

}

＆＃13;

<div id="background">
  <div class="example">
    <p class="num">
      Example
    </p>
  </div>
  <div class="example">
    <p class="num">
      Example 2
    </p>
  </div>
  <div class="example">
    <p class="num">
      Example 3
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;