1

这是小提琴：http: //jsfiddle.net/joplomacedo/mnj8n/

@-webkit-keyframes half-flip {
    0% { -webkit-transform: rotateX(0deg); }
    100% { -webkit-transform: rotateX(90deg); }
}

.half-flip-out {
    -webkit-animation: half-flip 1s;
    -webkit-transform: rotateX(90deg);
}

.half-flip-in {
    -webkit-animation: half-flip 1s reverse;
    -webkit-transform: rotateX(0deg);
}

我正在用 jQuery 切换类。出于某种原因，.half-flip-in 的作用与 .half-lip-out 完全相同。我不知道为什么。

4

1 回答 1

1

问题不在于animation-direction。我稍后会解释更多，所以现在让我们深入研究它。

您的 CSS3 关键帧动画声明应如下所示：

@-webkit-keyframes half-flip {
    0% {
        -webkit-transform: rotateX(0deg);
    }

    100% {
        -webkit-transform: rotateX(90deg);
    }
}

@-webkit-keyframes half-flip02 {
    0% {
        -webkit-transform: rotateX(90deg);
    }

    100% {
        -webkit-transform: rotateX(0deg);
    }
}

.half-flip-out {
    -webkit-animation: half-flip 1s;
}

.half-flip-in {
    -webkit-animation: half-flip02 1s;
}

正如您在上面看到的，有 2 个@-webkit-keyframes声明 - 每个都与另一个相反。另请注意，我从-webkit-transform: rotateX(0deg);and中删除-webkit-transform: rotateX(90deg);了.half-flip-outand .half-flip-in。原因很简单：它已经在关键帧动画中定义为 0%，即第一帧，以及 100%，即最后一帧。

接下来，你应该清理你的 jQuery。不必使用计数器来决定从 DIV 中添加或删除哪个类。此外，jQuery 中更短的代码等同于更快的执行速度。始终优化您的代码。

这就是你的 jQuery 的样子：

var folding_img_wrap = $('.folding_img_wrap'),
    toggle_count = 0;

$('.toggle').on('click', function() {
    if (toggle_count % 2 === 0) {
        folding_img_wrap.addClass('half-flip-out').removeClass('half-flip-in');
    } else {
        folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
    }
    toggle_count++;
});

这就是我推荐的方式：

var folding_img_wrap = $('.folding_img_wrap'),

$(".toggle").toggle(function(){
    folding_img_wrap.addClass('half-flip-in').removeClass('half-flip-out');
},function(){
    folding_img_wrap.removeClass('half-flip-out').addClass('half-flip-in');
});

你可以在这里查看我的解决方案。

记住还要-moz-为你的 CSS3 声明使用前缀，否则，这只适用于 Chrome 和 Safari。另请注意，keyframesIE9 或 Opera 不支持此功能。

于 2012-06-24T19:10:00.040 回答