Question

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

如果您点击个人＆＃34;控制按钮＆＃34;外部网站的链接适用于每个项目。链接到他们。问题是，如果自动播放运行，则单击任何项目将转到第一个数字元素，因此将转到www.google.co.uk链接。

由于标记不随转换而改变，我们无法使用JQuery获取任何已更改的元素。我们尝试为＆＃34; transitionend＆＃34;添加一个事件处理程序。（或其浏览器等效）但永远不会触发。

欢迎任何见解。

更新

我们已经尝试了

$(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，并且可能是另一个图库（也在网址中设置哈希会破坏自动播放）。但是，我意识到在库动画循环期间没有在项目上正确设置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

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

CSS3 Transition Carousel

1 个答案: