Question

我试图使用velocity.js为一个元素的translateX和rotateZ属性设置动画，这是我的代码：

$(document).ready(function () {
    $("div").velocity({
        rotateZ: '-10deg'
    }, {
        loop: true
    });
    $("div").velocity({
        'translateX': '2000px'
    });
});

我想要实现的是让元素在一条直线上向右移动，同时总是上下振动（无限旋转10度），但结果是循环适用于两个属性不仅在旋转，而且一旦翻译开始旋转变大。

jsfiddle

Answer 1

不是使用单个元素并且应用两个动画，而是如何创建两个元素并为每个元素应用一个动画。

我会考虑以下替代方案：

<div class="outer">
    <div class="inner">I'm trying to vibrate and move.</div>
</div>

$(document).ready(function () {
    $(".outer").velocity({
        rotateZ: '-10deg'
    }, {
        loop: true
    });
    $(".inner").velocity({
        'translateX': '2000px'
    });
});

用JS同步动画

1 个答案: