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

Question

我想通过 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>

有什么特殊的地方我忽略了吗？！

Answer 1

V2 不再支持

rotateZ。 https://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>

Answer 2

如 Velocity V2 文档以及此处的几个答案中所述 - rotateZ 无效 css，如果您尝试使用 css 则什么都没有会发生，因此它不再在 Velocity 中。

您现在需要为 css 转换使用真实的 css 值，这意味着使用 {transform: "rotateZ(360deg)"}。 Transform 本身在浏览器中也有几个问题，所以强制进给总是更安全，这意味着给它一个起始值和结束值 - {transform: ["rotateZ(360deg)", "rotateZ(0deg)"]}。最后，您已经完成了一个完整的循环 - 那么您是希望它来回弹跳，还是希望它继续以相同的方式旋转？如果您真的想要无限旋转，请使用 repeat: true 而不是 loop: true（交替开始和结束值）。

```

<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({
            transform: ["rotateZ("+value+"deg)", "rotateZ(0deg)"]
        }, { delay: 400, duration: 1000, easing: 'linear', repeat: true });

    </script>
</body>

```

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

simple rotateZ not working in Velocity js

javascript

velocity.js