gpt4 book ai didi

javascript - 简单的rotateZ在Velocity js中不起作用

转载 作者:行者123 更新时间:2023-11-28 14:35:18 25 4
gpt4 key购买 nike

我想通过速度js旋转一个元素,但rotateZ不起作用,但一些动画(如宽度、高度、不透明度等)可以正常工作。

这是我的简单代码:

<style>
#test{
height: 100px;
width: 10px;
background-color: red;
}
</style>
<body>
<div id="test"></div>

<script src="jquery-3.3.1.js"></script>
<script src="velocity.min.js"></script>
<script>

var value = 360; //animate to
var steps = 6; //animation steps per frame (1/60sec.)
var time = (1000 / 60) * (value / steps); //animation time

$('#test').velocity({
rotateZ: "360deg"
}, { delay: 400, duration: 1000, easing: 'linear', loop: true });

</script>
</body>

有什么特别的地方我忽略了吗?!

最佳答案

V2 不再支持

rotateZhttps://github.com/julianshapiro/velocity/blob/master/V2_CHANGES.md

这在 1.5.1 上运行良好。请查看下面 Rycochet 的答案,以在 V2 中实现此目的。

#test{
height: 100px;
width: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.1/velocity.min.js"></script>
<body>
<div id="test"></div>
<script>

var value = 360; //animate to
var steps = 6; //animation steps per frame (1/60sec.)
var time = (1000 / 60) * (value / steps); //animation time

$('#test').velocity({
rotateZ: "360deg"
}, { delay: 400, duration: 1000, easing: 'linear', loop: true });

</script>
</body>

关于javascript - 简单的rotateZ在Velocity js中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49963104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com