3

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

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

当我前进到多部分表单的每个后续部分时，一些 JS 或 jQuery 会更改 inlinestyle属性的宽度，.nf-progress 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;
}

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

我一直在挖掘，发现一篇文章让我用纯 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 来完成这个？

4

1 回答 1

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 元素。这将阻止您的动画运行。

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

于 2018-09-01T02:39:20.510 回答