其他转换结束后的转换延迟答案

【问题标题】：Transition delay after other transition has ended其他转换结束后的转换延迟
【发布时间】：2016-05-19 09:55:06
【问题描述】：

我有 2 个 div 将容器分成 2 个宽度 50% 宽度的问题。
当悬停在一个上时，它会扩展到 60/40%。

问题是：当悬停在 1 上（因此它被扩展）然后快速悬停在另一个上时，z-index 正在裁剪。

看看这个小提琴的例子： https://jsfiddle.net/h9vs79as/

我需要在反转过渡结束后触发新的过渡...

HTML

<div class="container">
  <div class="one">div 1</div>
  <div class="two">div 2</div>
</div>

CSS

.container { height: 200px;  width: 500px;  position: relative; }
.container div { position: absolute; height: 200px; width: 50%; z-index: 100; transition: all .5s ease; }
.one { left: 0; background-color: #00ff00; }
.two { right: 0; background-color: #ff00ff; }
.container div:hover { width: 60%; z-index: 150;  transition: all .5s ease; }

【问题讨论】：

请将您的代码添加到问题中，正如@Paulie_D 指出的那样，Stackoverflow 不仅仅是为了帮助您；供以后参考，帮助大家学习。
已添加 @Paulie_D 抱歉，对此有点生气..

标签： css z-index transition

【解决方案1】：

您可以使用 flexbox 来完成此操作，无需定位或 z-index：

.container {
  height: 200px;
  width: 500px;
  position: relative;
  display: flex;
}
.container div {
  flex: 1 1 50%;
  transition: all .5s ease;
}
.one {
  background-color: #00ff00;
}
.two {
  background-color: #ff00ff;
}

.container div:hover {
  flex: 0 0 60%;
  transition: all .5s ease;
}

<div class="container">
  <div class="one">div 1</div>
  <div class="two">div 2</div>
</div>

【讨论】：