Question

我有一组div，我以不同的方式制作动画。第一个使用以下方式摆动/翻转到堆栈：

@-webkit-keyframes cardflip {
    from {
       -webkit-transform: perspective(2000) rotateY(90deg);
       -webkit-transform-origin: 100% 0%;
    }
    to {
       -webkit-transform: perspective(2000) rotateY(0deg);
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: translate3d(0, 0, 0);
    }
}

其他人正在使用变换：

#cards .card:nth-child(2)  { -webkit-transform: translate3d(0, 171px, 0); transform: translate3d(0, 183px, 0); }
#cards .card:nth-child(3)  { -webkit-transform: translate3d(0, 342px, 0); transform: translate3d(0, 352px, 0); }
#cards .card:nth-child(4)  { -webkit-transform: translate3d(0, 513px, 0); transform: translate3d(0, 521px, 0); }
#cards .card:nth-child(5)  { -webkit-transform: translate3d(0, 684px, 0); transform: translate3d(0, 690px, 0); }
#cards .card:nth-child(6)  { -webkit-transform: translate3d(0, 855px, 0); transform: translate3d(0, 859px, 0); }
#cards .card:nth-child(7)  { -webkit-transform: translate3d(0, 1026px, 0); transform: translate3d(0, 1028px, 0); }

我期望发生的事情是当我在第一个位置添加一个新的div而另一个＆＃39;向下滑动，第一个翻转到顶部位置。但似乎我设置它的方式，当我在堆栈顶部添加新div时，滑动动画不会发生，它只是捕捉到它的新位置。我该如何解决这个问题？

顺便说一下，我只在Chrome上工作，因此缺少非webkit前缀。

Fiddle.

Answer 1

你必须使用一点点javascript，而不是切换一个类。这是因为第一个孩子的CSS选择器会被立即使用，因为从动画转换到转换不会像你想象的那样工作

var count  = 0;
setInterval(function() {
    $('#cards').prepend('<div class="card">testadd' + count++ + '</div>' );
    setTimeout(function() {
        document.getElementsByClassName("card")[0].className = "card first"; 
    }, 10); // Fire just after it's added so it transitions
    $('#cards .card:last').remove();
}, 5000);

CSS

#cards .first { -webkit-transform:translate3d(0,0,0) rotateY(0deg); }
#cards .card:nth-child(1)  { z-index: 1000; }

Demo

（计数用于测试目的）

CSS3的多个动画无法按预期工作

1 个答案: