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過渡傳送帶

回答

相關問題