CSS3转变旋转体

Question

我们需要创建一个响应性的图像旋转体，并使用图片库CSS (一个只有CSS的旋转木马，没有javascript - http://benschwarz.github.io/gallery-css/)。

下面是使用的标记的示例(不包括图像)

<div class="gallery autoplay items-3">
    <div id="item-1" class="control-operator"></div>
    <div id="item-2" class="control-operator"></div>
    <div id="item-3" class="control-operator"></div>

    <figure class="item">
        <a href="http://www.google.co.uk">
            <h1>First Item</h1>
        </a>
    </figure>

    <figure class="item">
        <a href="http://www.bbc.co.uk/news">
            <h1>Second Item</h1>
        </a>
    </figure>

    <figure class="item">
        <a href="http://www.apple.co.uk">
            <h1>Third Item</h1>
        </a>
    </figure>

    <div class="controls">
        <a href="#item-1" class="control-button">•</a>
        <a href="#item-2" class="control-button">•</a>
        <a href="#item-3" class="control-button">•</a>
    </div>
</div>

如果您单击单个“控件-按钮”链接以获得这些链接，则指向外部网站的链接对每个项目都有效。问题是，如果自动播放运行，那么单击任何项都会转到第一个图元素，因此会转到www.google.co.uk链接。

由于标记不会随转换而改变，所以我们不能使用JQuery获取任何更改的元素。我们曾尝试为"transitionend“(或其浏览器等效)添加一个事件处理程序，但从未触发。

欢迎任何有识之士。

更新：

我们试过了

$(document).ready(function () {
        $('.item').on('animationend webkitAnimationEnd MSAnimationEnd', function () {
            alert('fired !!');
        });
    });

和

$(document).ready(function () {
            $('div').on('animationend webkitAnimationEnd MSAnimationEnd', function () {
                alert('fired !!');
            });
        });

无论是自动播放还是单击控件按钮，都不会在动画上触发.

Answer 1

好的，我仔细看了看画廊代码。animationend事件在任何时候都没有被调用的原因是因为动画处于无限循环中，因此永远不会结束。您可以转而查看animationstart和animationiteration事件，但在这一点上，它涉及大量的javascript，并且可能是另一个库(也可以设置url中的散列破坏自动播放)。但是，我意识到在图片库动画循环期间，它没有正确地设置项目上的pointer-events属性。那么，一个简单的修复方法就是在正确的css动画中设置它，如下所示：

@keyframes galleryAnimation-3 {
  0% {
    opacity: 0;
    pointer-events: none;
  }

  9.5%, 33.3% {
    opacity: 1;
    pointer-events: auto;
  }

  42.9%, 100% {
    opacity: 0;
    pointer-events: none;
  }
}

如果您不知道，指针事件将决定鼠标如何与该特定元素交互。如果您查看这个代码页，您将看到它现在运行良好，无论是在自动播放还是在您选择控制点之后：http://codepen.io/paulmg/pen/akxVZk

如果您不能直接访问库css代码来设置指针事件，那么您应该能够将动画本身添加到自己的css中，并且只要这些动画放在库css之后，就可以覆盖这些动画。