如何使用Velocity.js动画化翻译属性? [英] How to animate translate properties with Velocity.js?
问题描述
我有一个简单的代码块，假设它可以通过translateX向左移动200px.它将向左移动到左侧位置.我似乎无法使用translateX或translateY移动该块.转换转换的CSS值将起作用.使用翻译的原因是与位置相比的性能.我注释掉了Velocity的剩余位置，以使您了解我要达到的目标.
I have a simple block that is suppose to move left 200px with translateX. It will move left with position left. I can't seem to move the block with translateX or translateY. CSS values for Transform translate will work. Reason to use translate is the performance compared to position. I commented out the position left with Velocity to give you an idea what I'm trying to achieve.
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>推荐答案
在Velocity V2中，不再有任何诸如 transform 快捷方式-只需使用css transform 属性正确并且可以正常工作(不幸的是，V1中存在尝试这样做的问题).
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]);
如果没有强制进给，它将从0值开始进行动画处理.
If there's no forcefeeding it'll animate from a value of 0.
这篇关于如何使用Velocity.js动画化翻译属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
