强制 CSS 动画完成答案

【问题标题】：Forcing a CSS animation to complete强制 CSS 动画完成
【发布时间】：2015-05-22 01:49:47
【问题描述】：

对于一个艺术家的网站，图片完全填满浏览器窗口，我想显示一条缩略图，它将消失，只留下当前图像的缩略图在角落里。当您将鼠标移到此缩略图上时，缩略图条应会再次出现，以便您可以选择新图片。

我在下面包含了这个效果的模型，以及一个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>

【问题讨论】：

标签： css animation css-animations timing

【解决方案1】：

我不确定在没有 JavaScript 的情况下如何做到这一点。您可以切换类而不是使用悬停选择器，并使用transitionend 来检测动画何时完成以切换悬停类。

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

【讨论】：

【解决方案2】：

最明显的解决方案是让您的缩略图设置宽度/高度，并将图像设置为背景大小为“cover”或“contain”且背景位置为“center center”的 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/

【讨论】：

【解决方案3】：

在进一步调查中，我需要以两种方式修改@Moogs 给出的答案，我的问题中都没有指定这两种方式：

我的问题中的 cue div 的 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>

【讨论】：