javascript - 旋转瓷砖；悬停后如何延迟过渡

Question

我是 Javascript 的新手。这就是我想要做的。我想要一组覆盖窗口的方形瓷砖，我希望它们在鼠标经过它们时翻转过来。我已经有一个瓷砖了。请参阅下面的 Jsfiddle。

http://jsfiddle.net/V7cS8/

我希望 tile 可以完全翻转到背面，即使用户没有在整个动画长度内悬停(基本上，即使悬停只是非常短暂，我也希望它提交旋转)。我希望它在最短时间内保持翻转状态，然后在用户不再悬停时返回。

我应该尝试完全使用 javascript 还是仍然使用大量 CSS？

Answer 1

您根本不需要 JavaScript/jQuery。将 CSS 中的所有 .flip 引用替换为 :hover: http://jsfiddle.net/V7cS8/1/

对于延迟，您可以使用 transition-delay: 1s .

将 transition-delay:1s;(延迟 1 秒，带有 vendor 前缀)应用于普通选择器，并将 transition-delay:0s 应用于 :悬停 选择器。结果是后空翻会延迟1秒。

演示:http://jsfiddle.net/s9xcP/2/

评论链的结果:当必须首先完成现有动画时，无论悬停状态如何，都必须使用 JavaScript 超时:

演示:http://jsfiddle.net/nY8U8/224/

$(function(){
    $('.box').hover(function(){
        var $this = $(this);
        
        // If not not-ready, do nothing
        // By default, the value is `undefined`, !undefined === true
        var not_ready = $this.data('box-hover-not-ready');
        if (!not_ready) {
            $this.addClass('hover');
        } else {
            // If bosy, defer hover transition
            $this.data('box-hover-hovered', true);
        }
    }, function() {
        var $this = $(this);
        $this.removeClass('hover');

        // Mark state as "busy"
        $this.data('box-hover-not-ready', true);
        var timeout = setTimeout(function() {
            var hovered = $this.data('box-hover-hovered');
            if (hovered) {
                // If a hover transition is deferred, activate it now.
                $this.addClass('hover');
                $this.data('box-hover-hovered', false);
            }
            // Mark state as "not busy"
            $this.data('box-hover-not-ready', false);
        }, 2000); /* 2 seconds*/
        
        // Remove previous timeout, set new one.
        clearTimeout($this.data('box-hover-timeout'));
        $this.data('box-hover-timeout', timeout);
    });
});