javascript - CSS3 过渡轮播

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;
  }
}

如果您不知道，指针事件决定了鼠标如何与该特定元素交互。如果您看一下这个代码笔，您会发现它现在在自动播放和选择控制点后都可以正常工作:http://codepen.io/paulmg/pen/akxVZk

如果您不能直接访问图库 css 代码来设置指针事件，您应该能够在自己的 css 中添加动画本身，并让它们覆盖图库，只要它们放在图库 css 之后.