Question

enter cod

我有一个简单的块，假设用translateX向左移动200px。它会向左移动，向左移动。我似乎无法使用translateX或translateY移动块。 Transform translate的CSS值可以使用。使用translate的原因是与position相比的性能。我评论了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 ]);

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

Answer 2

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

在Velocity V2中，不再有任何转换快捷方式，例如 translateX-只需正确使用css transform属性，它将工作（不幸的是，V1中存在尝试这样做的问题）。 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翻译不起作用

3 个答案: