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

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