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中实现此目的。

＆＃13;

#test{
  height: 100px;
  width: 10px;
  background-color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

正如在Velocity V2文档中非常清楚地说明的那样，以及这里的几个答案 - rotateZ是无效的css，如果你用css尝试过，那么什么都不会发生，因此它不在Velocity中更多。

您现在需要为css转换使用实际css值，这意味着使用{transform: "rotateZ(360deg)"}。变换本身在浏览器中也有几个问题，所以强制进行总是更安全，这意味着给它起始值和结束值 - {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中工作

2 个答案: