如何解决如何在不影响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 举报,一经查实,本站将立刻删除。