如何使用 Velocity.js 为翻译属性设置动画？答案

【问题标题】：How to animate translate properties with Velocity.js?如何使用 Velocity.js 为翻译属性设置动画？
【发布时间】：2018-08-04 12:26:01
【问题描述】：

我有一个简单的块，假设用 translateX 向左移动 200 像素。它将向左移动，位置向左。我似乎无法使用 translateX 或 translateY 移动块。 Transform translate 的 CSS 值将起作用。使用翻译的原因是与位置相比的性能。我注释掉了 Velocity 留下的位置，让您了解我想要实现的目标。

var button  = document.getElementById('button');
var adiv = document.getElementById('panel');
button.addEventListener('click', function(){
    //Velocity(adiv, { left: '100' }, [ 500, 20 ]);
    Velocity(adiv, {translateX: 200}, [ 500, 20 ]);
})

#panel {
    display: block;
    position: absolute;
    background: #ffffbd;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
   }

button {
    top: 90%;
    position: relative;
    display: block;
}

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


    <body>
      <div id="topbar"></div>
       <div id="panel">
       </div>
   <button id="button">start</button>
   </body>

【问题讨论】：

现在遇到了同样的问题。不幸的是，我还没有找到解决方案，如果我找到了会告诉你的。我什至可以将 translateX 和 opacity 结合起来，并且 opacity 会设置动画，但翻译会被完全跳过。我在没有 jquery 的情况下运行 Velocity。
想通了，velocity 已经更新到 2.0 并且一些代码已经改变。新文档在 github 上。 github.com/julianshapiro/velocity/wiki
还注意到 CDN 已损坏并且无法使用转换。从 Github 下载缩小版本并将其包含到您的项目中。然后它会工作。
@woulter125 非常出色......所以我想如果我想使用 CDN 链接让它工作，我必须等到它更新。同时，我将使用它的 min.js 版本。

标签： javascript jquery velocity.js

【解决方案1】：

在 Velocity V2 中不再有任何 transform 快捷方式，例如 translateX - 只需正确使用 css transform 属性，它就会起作用（不幸的是，在 V1 中尝试这样做会出现问题）。

Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);

如果没有强制喂食，它将从 0 值开始动画。

【讨论】：

确实有效，看起来您也需要使用像素。终于有答案了！
将单元素语法与 V2 和转换一起使用，我收到一条错误消息 Uncaught TypeError: Cannot read property 'pattern' of undefined — 我这里有什么遗漏吗？ $element.velocity({ transform: "translateX(100%)" }); 。这是一个代码笔，其中包含引发错误的示例：codepen.io/poopsplat/pen/wxzWvg
第一次在应该使用强制馈送的元素上使用 transform 时，“如果尚未指定，则将其视为从 0 开始”位现在似乎不起作用（这是一个在它工作时实际上可以正确使用的极少数情况下）。

【解决方案2】：

随着 VUE 第 3 版的推出，Velocity 似乎正在加速发展。我强烈建议 Velocity 2.0 文档更新一些信息，例如：

在 Velocity V2 中不再有任何转换快捷方式，例如 translateX - 只需正确使用 css 转换属性，它就会工作（不幸的是，V1 中存在尝试这样做的问题）。速度(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);

或者联系 VUE 团队，因为他们仍在使用 Velocity 1.x 示例。

【讨论】：

我完全删掉了整个 Velocity 库。我遇到了很长时间没有答案的许多问题。我希望事情能尽快好起来！
查看anime.js

【解决方案3】：

使用 jQuery 的简单示例：

$('.box').on('click', function() {  
  $(this).velocity({
    transform: ["translateX(100px)", "translateX(0px)"]
  }, {duration: 1000});
});

【讨论】：