javascript - 使用内联样式(CSS 或 jQuery)的过渡动画

Question

我正在使用 Ninja Forms 附带的进度条 Multi-Part Form addon这是进度条的设置。

<div class="nf-progress-container">
    <div class="nf-progress" style="width: 0%;"></div>
</div>

当我前进到多部分表单的每个后续部分时，某些 JS 或 jQuery 会更改 .nf-progress 中内联 style 属性的宽度 div 并且进度条会随着每个步骤的完成而填充。

为了帮助您形象化，这是我的 UI 样式。

我希望进度条在每个步骤完成时为 .nf-progress div 设置动画。我认为它会像 transition: width 1s ease; 一样简单，但它不起作用(即使使用 -webkit-transition)。这是我尝试过的。

.nf-progress-container .nf-progress {
    transition: width 1s ease;
    -webkit-transition: width 1s ease;
}

我做了更多调查，发现您无法使用 transition css 属性为内联样式设置动画。不知道为什么，但显然你不能这样做。

我一直在挖掘，发现了一篇让我更接近的文章 here纯CSS动画关键帧。

@-webkit-keyframes progress-bar {
   0% { width: 0; }
}
@-moz-keyframes progress-bar {
   0% { width: 0; }
}
@keyframes progress-bar {
   0% { width: 0; }
}

.nf-progress-container .nf-progress { 
  -webkit-animation: progress-bar 1s;
  -moz-animation: progress-bar 1s;
  animation: progress-bar 1s;
}

这里的好处是我实际上得到了一些的动画。这种方法的问题在于，对于进度条的每一步，动画都从 width:0% 开始。我希望元素从以前的宽度过渡到新的内联样式宽度。

有谁知道如何用 CSS 做到这一点，或者是否有办法用 jQuery 做到这一点？

Answer 1

您从哪里了解到无法使用内联样式转换元素的宽度？这是可能的:

function increaseWidth() {
  var elem = document.querySelector('span');
  elem.style.width = elem.clientWidth + 50 + 'px';
}

setInterval(increaseWidth, 600)

span {
  height: 20px;
  width: 50px;
  transition: width 0.5s;
  background: purple;
  display: inline-block;
}

<span/>

在您的情况下，您正在使用的第三方 JavaScript 库正在删除然后重新创建您想要设置动画的 bar 元素。这将阻止您的动画运行。

如果你真的需要条形动画，你可以修改第三方应用程序的源代码以确保它变异但不会破坏和重新创建条形元素。或者您可以编写自己的动画栏，这非常简单(见上文)。