CSS3 Transition Carousel

Question

我们需要创建一个响应式的图像轮播，并使用Gallery CSS（一个没有javascript的CSS旋转木马 - 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;
  }
}

如果您不知道，指针事件将确定鼠标与该特定元素的交互方式。 如果你看一下这个codepen，你会发现现在使用自动播放和选择一个控制点之后它可以正常工作： http ： //codepen.io/paulmg/pen/akxVZk

如果您无法直接访问gallery css代码来设置指针事件，那么您应该只需在自己的css中添加动画本身，并且只要将它们放在gallery css之后，就会覆盖它们。