使用内联样式（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会更改style .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;
}

我做了一些调查，发现你无法使用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库正在删除，然后重新创建要设置动画的栏元素。这将阻止您的动画运行。

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