如何使用 Velocity.js 动画化翻译属性？

Question

我有一个简单的块，假设使用 translateX 向左移动 200 像素。它将向左移动，位置为 left。我似乎无法使用 translateX 或 translateY 移动方块。 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>

Answer 1

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

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

如果没有 forcefeeding，它将从值 0 开始动画。

Answer 2

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

In Velocity V2 there are no longer any transform shortcuts such as translateX - just use the css transform property properly and it'll work (there are issues in V1 with trying to do that unfortunately). Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);

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

Answer 3

jQuery 的简单示例：

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

如何使用 Velocity.js 动画化翻译属性？

How to animate translate properties with Velocity.js?

javascript

jquery

velocity.js