Question

这是小提琴：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完全相同。我无法弄清楚原因。

Answer 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);和-webkit-transform: rotateX(90deg);删除了.half-flip-out和.half-flip-in。原因很简单： 它已经在关键帧动画中定义为0％，这是第1帧，而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');
});

您可以查看我的解决方案here。

还要记住使用-moz-前缀作为CSS3声明，否则，这只会在Chrome＆amp;苹果浏览器。另请注意，IE9或Opera中不支持keyframes。

'动画方向'不起作用。为什么？

1 个答案: