无法使用嵌套在具有 css 动画的元素中的 css 过渡

Question

如果我只使用过渡或只使用动画，我可以让一切正常工作，但我似乎无法弄清楚如何让混合工作。

基本上我有一个要淡入的外部元素，然后在淡入完成后要滑入一个内部元素。

我的真实例子很复杂，所以我创建了一个小提琴来说明我要做什么。

如何让底部栏的行为与顶部栏相似？ （除了 scaleX 的明显差异）。问题是底部的内部蓝色条立即显示为完整的，而不是像顶部那样以动画方式打开。

https://jsfiddle.net/joshuaohana/sqsLc5sd/ 对于此示例，只需将鼠标悬停在任一彩色框上

<div class="outer">
  <div class="inner">
  </div>
</div>

<p></p>

<div class="outer2">
  <div class="inner2">
  </div>
</div>

.outer {
  width: 300px;
  height: 100px;
  background-color: red;
  opacity: 0.1;
}
.outer .inner {
  height: 100px;
  width: 0;
  background-color: blue;
}
.outer:hover {
  opacity: 1;
  transition: opacity 1s;
}
.outer:hover .inner {
  width: 100px;
  transition: width 1s 0.5s;
}

.outer2 {
  width: 300px;
  height: 100px;
  background-color: red;
  opacity: 0.1;
}
.outer2 .inner2 {
  height: 100px;
  width: 0;
  background-color: blue;
}
.outer2:hover {
  opacity: 1;
  transition: opacity 1s;
}
.outer2:hover .inner2 {
  width: 100px;
  animate: widen 1s 0.5s forwards;
}

@keyframes widen {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
}

Answer 1

您使用的是animate，而不是animation。我也会使用translateX 而不是scaleX()，但这可能并不重要。我还将在.inner2 的规则中设置动画的初始状态，然后简化动画并仅指定to 或100% 步骤。

.outer {
  width: 300px;
  height: 100px;
  background-color: red;
  opacity: 0.1;
}
.outer .inner {
  height: 100px;
  width: 0;
  background-color: blue;
}
.outer:hover {
  opacity: 1;
  transition: opacity 1s;
}
.outer:hover .inner {
  width: 100px;
  transition: width 1s 0.5s;
}

.outer2 {
  width: 300px;
  height: 100px;
  background-color: red;
  opacity: 0.1;
  transition: opacity 1s;
  overflow: hidden;
}
.inner2 {
  height: 100px;
  transform: translateX(-100%);
  background-color: blue;
  transform-origin: 0;
}
.outer2:hover {
  opacity: 1;
}
.outer2:hover .inner2 {
  width: 100px;
  animation: widen 1s forwards;
  animation-delay: .5s;
}

@keyframes widen {
    to {
      transform: translateX(0);
    }
}

<div class="outer">
  <div class="inner">
  </div>
</div>

<p></p>

<div class="outer2">
  <div class="inner2">
  </div>
</div>