无法重复动画 - jQuery Transit

Question

使用jQuery插件Transit，

我不能让我的动画重复一次以上。

这是我的 jQuery：

    $('.cart').mouseenter(function(){
    $('.cartIcon').transition({
        perspective: '500px',
        rotateY: 360 ,
        duration: 400,
        easing: 'in'
    });
});

Answer 1

您的问题是，第一次转换购物车图标时，您会将其旋转 360 度。第二次转换它时，它仍然具有该状态。所以你再次转换它...从 360 度 到 360 度，这意味着什么都没有发生。要让它每次都具有动画效果，您需要选择一些将其转换回来的方法。

http://jsfiddle.net/rFKw8/2/

这只是一种可能性：

$('.cart').mouseenter(function(){
    var $cart = $(this),
        $cartIcon = $cart.find('.cartIcon'),
        transitionOptions = {
            perspective: '500px',
            duration: 500,
            easing: 'in'
        };

    if (!$cart.data('transitioned')) {
        transitionOptions.rotateY = 360;
        $cartIcon.transition(transitionOptions, function () {
            $cart.data('transitioned', true);
        });
    } else {
        transitionOptions.rotateY = 0;
        $cartIcon.transition(transitionOptions, function () {
            $cart.data('transitioned', false);
        });
    }
});