无法重复动画 - 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);
        });
    }
});