強制完成CSS動畫

對於一個藝術家的網站，圖片完全填充瀏覽器窗口，我想顯示一條縮略圖，它將消失，只留下當前圖像的縮略圖。當您將鼠標滑過此縮略圖時，縮略圖條會再次出現，以便您可以選擇新圖片。強制完成CSS動畫

我已經在下面包含了該效果的模型，並且您可以在其中看到這個效果的jsFiddle。

如果將鼠標滑過縮略圖然後再次快速關閉，動畫將停止，保持暫停狀態1秒，然後反轉。我應該如何改變CSS，以便滑出動畫一旦啓動就會一直播放到最後？

<html> 
<head> 
<style> 
    html, body { 
    height: 100%; 
    margin:0; 
    overflow: hidden; 
    } 
    div { 
    position:absolute; 
    left:0; 
    width: 100px 
    } 
    #cue, #thumb { 
    bottom:0; 
    height:50px; 
    } 
    #cue, #thumb { 
    bottom:0; 
    height:50px; 
    } 
    #cue { 
    background: none; 
    opacity: 0.2; 
    z-index: 2; 
    } 
    #thumb { 
    background: blue; 
    opacity: 0.5; 
    } 
    #strip { 
    background: blue; 
    opacity: 0.2; 
    z-index:1; 
    height: 99%; 
    top: 100%; 
    -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -webkit-transition-delay: 1s; 
    transition-delay: 1s; 
    } 
    #cue:hover + #strip, #strip:hover { 
    top: 1%; 
    -webkit-transition-delay: 0s; 
    transition-delay: 0s; 
    } 
    #thumb { 
    -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -webkit-transition-delay: 1200ms; 
    transition-delay: 1200ms; 
    } 
    #cue:hover ~ #thumb, #strip:hover+#thumb { 
    opacity: 0; 
    -webkit-transition-delay: 0s; 
    transition-delay: 0s; 
    } 
</style> 
</head> 
    <div id="cue"></div> 
    <div id="strip"></div> 
    <div id="thumb"></div> 
</html>

來源

2015-05-22 James Newton

我不知道如何在沒有JavaScript的情況下做到這一點。您可以切換類而不是使用懸停選擇器，並使用transitionend來檢測動畫何時完成以切換懸停類。

https://jsfiddle.net/w5b1hm0w/2/

來源

2015-05-22 02:28:04

最明顯的解決方案是讓你的縮略圖設置寬度/高度，並有圖像與背景大小「覆蓋」或「遏制」和背景的位置「中心爲中心」的CSS背景圖像。

.thumb { 
    background-image: url('some-image.png'); 
    background-position: center center; 
    background-size: cover; 
}

如果你真的想在你的動態縮略圖寬/高我建議可能在尋找的JavaScript插件，操縱CSS像磚石或同位素：

http://masonry.desandro.com/

http://isotope.metafizzy.co/

來源

2015-05-22 02:03:48

在進一步的調查，我需要修改有兩種方式，這兩者都不在我的問題是由指定給@Moogs答案：

的cue格在我的問題比縮略圖帶有更高的z-index，所以不可能選擇帶子中最底部的縮略圖
如果將光標從開放帶上拖出，然後再次移回它開始關閉之前，應該保持開放

這是我的最終解決方案的演示，以及jsFiddle在那裏你可以測試它。非常感謝@Moogs讓我走上正軌。

<html> 
<head> 
    <style> 
     html, body { 
      height: 100%; 
      margin:0; 
      overflow: hidden; 
     } 
     div { 
      position:absolute; 
      left:0; 
      width: 100px 
     } 
     #cue, #thumb { 
      bottom:0; 
      height:50px; 
     } 
     #cue { 
      opacity: 0; 
      z-index: 1; 
     } 
     #thumb { 
      background: blue; 
      opacity: 0.5; 
     } 
     #strip { 
      background: blue; 
      opacity: 0.2; 
      z-index:1; 
      height: 99%; 
      top: 100%; 
      -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      -webkit-transition-delay: 1s; 
      transition-delay: 1s; 
     } 
     #strip.hover { 
      top: 1%; 
      -webkit-transition-delay: 0s; 
      transition-delay: 0s; 
     } 
     #thumb { 
      -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
      -webkit-transition-delay: 1200ms; 
      transition-delay: 1200ms; 
     } 
     #strip.hover+#thumb { 
      opacity: 0; 
     } 
     /* .inProgress is needed to ensure that the thumb will reappear if 
      you move the mouse off the strip before it is completely open. 
      If the following rule is merged with the #strip.hover+#thumb rule, 
      then the change from #strip.hover+#thumb to #strip+#thumb (with 
      no .hover) may fail to be acted on by the #thumb. 
     */ 
     #thumb.inProgress { 
      -webkit-transition-delay: 0s; 
      transition-delay: 0s; 
     } 
    </style> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 

<body> 
<div id="cue"></div> 
<div id="strip"></div> 
<div id="thumb"></div> 

<script> 
    ;(function filmroll_animation() { 
     var cue = document.getElementById('cue') 
     var strip = document.getElementById('strip') 
     var thumb = document.getElementById('thumb') 

     var hover = "hover" 
     var inProgress = "inProgress" 

     var mouseover = false 
     var transitionDone = false 

     cue.onmouseover = function triggerSlideIn() { 
      transitionDone = false 
      strip.classList.add(hover) 
      thumb.classList.add(inProgress) 
     } 

     strip.onmouseleave = function viewPortLeave() { 
      mouseover = false; 
      if (transitionDone) { 
       strip.classList.remove(hover) 
      } 
     } 

     strip.onmouseover = function viewPortEnter() { 
      mouseover = true; 
      strip.classList.add(hover) 
     } 

     strip.addEventListener("transitionend", function viewPortShown() { 
      transitionDone = true; 
      thumb.classList.remove(inProgress) 
      if (!mouseover) { 
       strip.classList.remove(hover) 
      } 
     }, false) 
    })() 
</script> 
</body> 
</html>

來源

2015-05-22 15:56:17

強制完成CSS動畫

回答

相關問題