如何在不影响translateY的情况下用volume.js动画化translateX？

问题描述

当我尝试直接为translateX设置动画时，它显示的Y位置错误并且没有动画。但是我在$.css('transfom','translate(x,y)')和begin选项中使用complete时，效果很好。为什么第一种方法不起作用？

不起作用：

$("#element").veLocity({
  translateX: '15px'
},{
  duration: 150,easing: "swing"
}).veLocity("reverse");

#element {
  margin: 0;
  top: 50%;
  left: 15px;
  transform: translate(0,-50%);
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/veLocity/1.5.2/veLocity.min.js"></script>

<div id="element">item</div>

这有效：

$("#element").veLocity({
  left: "+=0px"
},easing: "swing",begin: function() {
    $(this).css('transform','translate(15px,-50%)')
  },complete: function() {
    $(this).css('transform','translate(0,-50%)')
  }
});

#element {
  margin: 0;
  top: 50%;
  left: 15px;
  transform: translate(0,-50%);
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/veLocity/1.5.2/veLocity.min.js"></script>

<div id="element">item</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）