javascript - 带有 "on transitionend"的横幅 rotate3d 循环

Question

http://jsfiddle.net/CA4C5/

我正在尝试制作 3d 横幅旋转。

首先我构建了它的 4 个面，然后发现我可能只需要 2 个面:

/正面可见，上面有 Banner1

/它向下旋转并使 Banner2 可见

/一旦完成(在 transitionend 上)，它必须同时做两件事:1. 在 0 毫秒内旋转回之前的状态，并将图像 1 更改为 2，将图像 2 更改为 3 -> 有效

/在到达最后一个横幅 (var anzahlbanner) 时，它基本上应该从数字 1 开始(这看起来很棘手，因为当最后一个横幅滑入到位并向后翻转时，它需要显示最后一个(前面是 6)和banner1 在隐藏的一面。

但我什至没有说到这里，因为这个函数似乎触发了两次，即在平滑过渡时触发，然后在向后翻转过渡时触发。

$("#eins").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

当您在 javascript 中激活第 31 行时，您会看到这一点。

我怎样才能让我的计数器按照我需要的方式上升？

编辑:实际上似乎该函数没有被调用两次，而是每回合调用一次:1、2、3、4、5、6、7 次等。

Answer 1

我认为我可以稍微简化您的 javascript。

唯一的问题是我将您的图像更改为 div，并将图像设置在背景中。

现在，您的 HTML 是:

<div id="container">
    <div id="eins">
        <div></div>
    </div>
    <div id="zwei">
        <div></div>
    </div>
</div>

你的 CSS 是

#container {
    width: 1269px;
    height: 294px;

}

#eins, #zwei {
   position:absolute;
   top:0px;
   left:0px;
}

 #eins {
    width: 1269px;
            height:294px;
            z-index:150;
            -ms-transform-origin: 50% 50% 147px;
            -moz-transform-origin: 50% 50% 147px;
            -webkit-transform-origin: 50% 50% 147px;
  -webkit-animation: rotate 4s infinite;
  -webkit-animation-delay: -2s;
}
#zwei {
        background:red;
            width: 1269px;
            height:294px;
            z-index:70;
            -ms-transform-origin: 50% 50% 147px;
            -ms-transform: rotate3d(1, 0, 0, -90deg);
            -ms-transition: 1s;
            -ms-transition-timing-function: ease;
            -moz-transform-origin: 50% 50% 147px;
            -moz-transform: rotate3d(1, 0, 0, -90deg);
            -webkit-transform-origin: 50% 50% 147px;

            -webkit-animation: rotate 4s infinite;

}

#eins div, #zwei div {
    height:294px;

}

#eins div {
  -webkit-animation: imageseins 8s infinite;
  -webkit-animation-delay: -2s;
}
#zwei div {
  -webkit-animation: imageszwei 8s infinite;
}

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate3d(1, 0, 0, -90deg);}
   50% {-webkit-transform: rotate3d(1, 0, 0, 0deg);}
  100% {-webkit-transform: rotate3d(1, 0, 0, 90deg);}
}


@-webkit-keyframes imageseins {
    0%, 49.99% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner1.jpg")}
    50%, 100% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner3.jpg")}
}
@-webkit-keyframes imageszwei {
    0%, 49.99% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner2.jpg")}
    50%, 100% {background-image:    url("http://jenseickhoff.de/testarea/2014/img/banner4.jpg")}
}

而且，正如所 promise 的那样，您的 javascript 更容易(无)

fiddle

诀窍是在图像上设置动画，即在 div 不可见时更改图像。