javascript - 使用javascript设置两个动画之间的时间延迟

Question

我正在寻找在秒框展开和几秒后框阴影之间有时间延迟。我试过使用 setInterval 但效果不佳。还有其他干净的方法吗？

setInterval(clock,1000);
function clock(){
var d = new Date();
document.getElementById("hour").innerHTML = "Hours: " + d.getHours();
document.getElementById("minutes").innerHTML = "Minutes: " + d.getMinutes();
document.getElementById("seconds").innerHTML = "Seconds: " + d.getSeconds();
}
function myfunction(){
	var object = document.getElementById("seconds");
    object.style.padding = "100px";
    object.style.boxShadow = "0px 0px 15px black";
    
}

div{
    position:absolute;
    left:100px;
    top:100px;
	text-align:center;
    border:5px solid grey;
    padding:15px;
    margin:0;
    transition:0.3s;
	}
    div:hover{
    box-shadow:0px 5px 5px black;
    }
	p:nth-child(2){
    width:100px;
    border:1px solid black;
    background-color:lightyellow;
    }
    p:nth-child(3){
    width:100px;
    border:1px solid black;
    background-color:lightblue;
    }
    p:nth-child(4){
    width:100px;
    border:1px solid black;
    background-color:lightgreen;
    transition:.5s;
    }

<button onclick="myfunction()">Change Seconds background settings</button>
<div>
<p>Casio</p>
<p id="hour"></p>
<p id="minutes"></p>
<p id="seconds"></p>
</div>

Answer 1

您可以通过为 transition 属性添加多个属性并在您的情况下为 box-shadow 属性设置延迟来实现，此处为 1s

transition: padding .5s, box-shadow .5s 1s;

堆栈片段

setInterval(clock, 1000);

function clock() {
  var d = new Date();
  document.getElementById("hour").innerHTML = "Hours: " + d.getHours();
  document.getElementById("minutes").innerHTML = "Minutes: " + d.getMinutes();
  document.getElementById("seconds").innerHTML = "Seconds: " + d.getSeconds();
}

function myfunction() {
  var object = document.getElementById("seconds");
  object.style.padding = "100px";
  object.style.boxShadow = "0px 0px 15px black";

}

div {
  position: absolute;
  left: 100px;
  top: 100px;
  text-align: center;
  border: 5px solid grey;
  padding: 15px;
  margin: 0;
  transition: 0.3s;
}

div:hover {
  box-shadow: 0px 5px 5px black;
}

p:nth-child(2) {
  width: 100px;
  border: 1px solid black;
  background-color: lightyellow;
}

p:nth-child(3) {
  width: 100px;
  border: 1px solid black;
  background-color: lightblue;
}

p:nth-child(4) {
  width: 100px;
  border: 1px solid black;
  background-color: lightgreen;
  transition: padding .5s, box-shadow .5s 1s;
}

<button onclick="myfunction()">Change Seconds background settings</button>
<div>
  <p>Casio</p>
  <p id="hour"></p>
  <p id="minutes"></p>
  <p id="seconds"></p>
</div>

---

根据评论，这里是如何使用 setTimeout 延迟

setInterval(clock, 1000);

function clock() {
  var d = new Date();
  document.getElementById("hour").innerHTML = "Hours: " + d.getHours();
  document.getElementById("minutes").innerHTML = "Minutes: " + d.getMinutes();
  document.getElementById("seconds").innerHTML = "Seconds: " + d.getSeconds();
}

function myfunction() {
  var object = document.getElementById("seconds");
  object.style.padding = "100px";
  setTimeout(function() {
    object.style.boxShadow = "0px 0px 15px black";
  }, 1000);
}

div {
  position: absolute;
  left: 100px;
  top: 100px;
  text-align: center;
  border: 5px solid grey;
  padding: 15px;
  margin: 0;
  transition: 0.3s;
}

div:hover {
  box-shadow: 0px 5px 5px black;
}

p:nth-child(2) {
  width: 100px;
  border: 1px solid black;
  background-color: lightyellow;
}

p:nth-child(3) {
  width: 100px;
  border: 1px solid black;
  background-color: lightblue;
}

p:nth-child(4) {
  width: 100px;
  border: 1px solid black;
  background-color: lightgreen;
  transition: .5s;
}

<button onclick="myfunction()">Change Seconds background settings</button>
<div>
  <p>Casio</p>
  <p id="hour"></p>
  <p id="minutes"></p>
  <p id="seconds"></p>
</div>