Question

在进度条元素的转换顶部添加CSS动画时，我有一种奇怪的行为：转换只是停止执行。不知道为什么我不能同时拥有初始动画和更改元素宽度时的过渡。

整件事看起来像这样：

HTML：

Gaussian Mixtures

CSS：

  <div class="container">
    <div class="bar"></div>
    <div class="actions">
      <button id="btnResize">Resize bar</button>
    </div>
  </div>

我还创建了一个JSBin来显示怪异（https://jsbin.com/sufofitiri/edit?html,css,output）

希望有人能给我一些线索。

Answer 1

出于某种原因，似乎在同一属性上设置animation和transition会导致它无效。 This Bugzilla线程确认此声明（animation完全控制该属性并阻止transition产生任何影响。

因此，替代方案是将width用于另一个，将max-width用于另一个。选择哪一个应该用于动画以及哪个应该用于过渡取决于我们，没有固定的规则。

由于您的元素已经固定width，因此设置与width相同的max-width不会造成任何麻烦。在下面的代码段中，width用于animation，max-width用于transition。

＆＃13;

(function() {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  $("#btnResize").on("click", function() {
    $(".bar").css({
      "max-width": getRandomInt(1, 300) + "px"
    });
  });
})();

＆＃13;

.container {
  width: 100%;
  position: relative;
  margin: 1em;
}
.bar {
  height: 3px;
  background-color: blue;
  position: absolute;
  transition: margin-left 0.5s ease-in-out, max-width 0.5s ease-in-out;
  animation: progress-bar 1s 0.2s ease both;
}
.actions {
  padding-top: 30px;
}
@keyframes progress-bar {
  0% {
    width: 0
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bar" style="width: 300px; max-width: 300px"></div>
  <div class="actions">
    <button id="btnResize">Resize</button>
  </div>
</div>

＆＃13;

在下面的代码段中，max-width用于animation，width用于transition。两者都将按预期工作。

＆＃13;

(function() {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  $("#btnResize").on("click", function() {
    $(".bar").css({
      "width": getRandomInt(1, 300) + "px"
    });
  });
})();

＆＃13;

.container {
  width: 100%;
  position: relative;
  margin: 1em;
}
.bar {
  height: 3px;
  background-color: blue;
  position: absolute;
  transition: margin-left 0.5s ease-in-out, width 0.5s ease-in-out;
  animation: progress-bar 1s 0.2s ease both;
}
.actions {
  padding-top: 30px;
}
@keyframes progress-bar {
  0% {
    max-width: 0
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bar" style="width: 300px; max-width: 300px"></div>
  <div class="actions">
    <button id="btnResize">Resize</button>
  </div>
</div>

＆＃13;

当两者都应用于同一属性时，CSS关键帧动画会中断转换

1 个答案: