Javascript 为什么由VelocityJS设置动画的元素只改变不透明度？

我正在设置VelocityJS的一个基本演示，我注意到尽管复制了VelocityJS文档中的示例，但只有元素的不透明度在改变

我正在调试它，并注意到如果我使用旧版本，转换将按预期工作

使用最新版本（仅不透明度更改）：

测验
测验
测验
$（函数（）{
$（“div”）
.velocity（“transition.bounceDownOut”{
错开：500，
对,，
持续时间：1500
})
});
div{
文本对齐：居中；
颜色：#fff；
}

使用旧版本的JSFIDLE：

测验
测验
测验
$（函数（）{
$（“div”）
.velocity（“transition.bounceDownOut”{
错开：500，
对,，
持续时间：1500
})
});
div{
文本对齐：居中；
颜色：#fff；
}

---

任何帮助都将不胜感激

您使用的是针对V2速度的V1文档-这些转换不再存在（有新的转换，命名与

animate.css

动画相同-因此简单的

“bounceDownOut”

工作）。如果它不在Github上的Velocity Wiki中，那么它要么未经测试，要么即将发布（为什么转换等都发生了变化，现在序列更接近CSS动画）

Velocity的下一个公共beta版本将完全删除旧的转换，因此这些示例将报告错误，而不是部分工作

---

请记住，一个主要的版本号更改通常是API中一个突破性的更改：在这种情况下，UI包正在完全更改，并且添加了许多新的功能和特性。建议查看Velocity Github页面上的V2_CHANGES.md文件。

这就是Velocity JS问题列表的目的。再低一点，谷歌的魔力又来了@RandyCasburn这不太相关，但很接近-github上的版本现在可能会将此报告为错误，但我有时间发布的下一个版本肯定会抱怨；-）

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.ui.min.js"></script>

<div style="display: flex; height: 200px; overflow: hidden;">
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
</div>

<script>
  $(function() {

    $("div")
      .velocity("transition.bounceDownOut", {
        stagger: 500,
        backwards: true,
        duration: 1500
      })
  });

</script>

<style>
div {
  text-align: center;
  color: #fff;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2/velocity.ui.min.js"></script>

<div style="display: flex; height: 200px; overflow: hidden;">
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
  <div style="width: 100px; height: 100px; background-color: green; margin: 5px;">Test</div>
</div>
<script>
  $(function() {

    $("div")
      .velocity("transition.bounceDownOut", {
        stagger: 500,
        backwards: true,
        duration: 1500
      })

  });

</script>

<style>
div {
  text-align: center;
  color: #fff;
}
</style>