CSS3过渡传送带

我们需要创建一个图像响应轮播和使用画廊CSS（一个没有JavaScript的CSS只传送带 - http://benschwarz.github.io/gallery-css/）。CSS3过渡传送带

以下是用于标记的例子（不包括图像）

<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 !!'); 
      }); 
     });

上的动画无论是火，无论是自动播放或点击控制按钮。

来源

2016-08-18 Andrew Woodmore

该图库通过使用：target伪类来确定活动内容。在自动播放中，尽管：target没有被设置，因为它只是运行一个css动画循环。检查项目中的js中的动画结束事件，然后将url中的哈希标记设置为正确的元素（然而，这种方式不利于CSS只有图库的点）。 –

感谢您的回复。我已经用我们的尝试更新了这个问题。不幸的是，它们都不成功。 –

好吧，我仔细看了一下画廊代码。 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; 
    } 
}

如果你不知道，指针事件确定鼠标是如何与特定元素相互作用。如果你看看这个codepen，你会发现它现在工作正常，无论是自动播放和选择控制点后：http://codepen.io/paulmg/pen/akxVZk

如果你不能直接访问画廊的CSS代码来设置指针事件，你应该能够在自己的CSS中添加动画本身，并且只要将它们放置在gallery css之后，就可以覆盖它们。

来源

2016-08-19 17:25:03

这适用于Chrome，但不适用于IE11。 – psych

CSS3过渡传送带

回答

相关问题