为什么显示父元素时，transition-delay 对子元素不起作用？

Question

这可能最好用一个例子来说明。我有一个parent 和一个child。默认情况下，父级是隐藏的，除非它具有 in 类。只有在父级收到in 类后，其子级才应在 3 秒延迟后将其background-color 从绿色转换为白色。

所以当显示父级时，子级的背景色已经是白色了。没有 3 秒的橙色，过渡到白色。有人可以解释这里发生了什么吗？

$('button.show').on('click', () => {
  $('.parent').addClass('in');
});

$('button.hide').on('click', () => {
  $('.parent').removeClass('in');
});

.parent, .child {
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background-color: orange;
  width: 300px;
  height: 300px;
}

.child {
  background-color: green;
  padding: 20px;
  width: 150px;
  height: 150px;
  transition: background-color 1s linear;
}

.parent:not(.in) {
  display: none;
}

.parent.in .child {
  background-color: white;
  transition-delay: 3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="child">
    <span>Background should start green, then turn white, but transition isn't happening.</span>
  </div>
</div>

<br>
<button type="button" class="show">Show parent</button>
<button type="button" class="hide">Hide parent</button>

Answer 1

在给定父级的 display:none 起始条件的情况下，我对设置发生的确切时间有点困惑。

这个 sn-p 采用稍微不同的路径 - 使用我发现更容易控制的 CSS 动画。在显示父级之前不会设置动画，因此在时间上没有混淆的余地。

$('button.show').on('click', () => {
  $('.parent').addClass('in');
});

$('button.hide').on('click', () => {
  $('.parent').removeClass('in');
});

.parent,
.child {
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background-color: orange;
  width: 300px;
  height: 300px;
}

.child {
  background-color: green;
  padding: 20px;
  width: 150px;
  height: 150px;
  animation-name: none;
}

.parent:not(.in) {
  display: none;
}

.parent.in .child {
  animation-name: change;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

@keyframes change {
  0% {
    background-color: green;
  }
  100% {
    background-color: white;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    <span>Background should start green, then turn white, but transition isn't happening.</span>
  </div>
</div>

<br>
<button type="button" class="show">Show parent</button>
<button type="button" class="hide">Hide parent</button>

Answer 2

您看不到过渡的原因是因为子项从未以第一种背景颜色显示。从父级继承的display:none 开始，然后同时切换到父级显示和新颜色。

您需要先显示父项（以及通过继承的子项），然后更改子项的颜色。

JS

 $('button').on('click', () => {
     $('.parent').addClass('in');
     //Without settimeout this will run same time as first added class
     setTimeout(() => $('.parent').addClass('color'), 0);
 });

那么你就是css

.parent.in.color .child {
    background-color: white;
    transition-delay: 3s;
}