Question

我正在设置VelocityJS的基本演示，我注意到尽管从VelocityJS文档中复制了样本，但只有元素的不透明度发生了变化。

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

使用最新版本（仅限不透明度更改）： https://jsfiddle.net/rkek9u9w/

<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>

使用旧版本的JSFiddle： https://jsfiddle.net/zmxndac7/

<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>

非常感谢任何帮助。

Answer 1

您正在使用针对V2 Velocity的V1文档 - 这些转换不再存在（有新的转换，命名与animate.css动画相同 - 因此普通"bounceDownOut"有效）。如果它不在Github上的Velocity Wiki中，那么它要么没有经过测试，要么就已经出来了（为什么转换等都已经改变了，它现在的序列是与CSS动画更接近。）

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

请记住，主要的版本号更改通常是API的重大变化：在这种情况下，UI-Pack正在完全改变，并且添加了许多新的功能和特性。建议检查V2_CHANGES.md文件的Velocity Github页面。

为什么VelocityJS动画的元素只会改变不透明度？

1 个答案: