2

目前我正在处理带有滑块动画的标题（仅限css3）：

http://jimmytenbrink.nl/slider/

一切正常，但有时如果您从中心向右移动，滑块会出现问题。看来我需要停止动画几毫秒才能完成。但是我在互联网上到处搜索，但我似乎无法让它工作。

这里有人有这方面的经验谁可以帮助我？

HTML

<header>
  <div><span>slide 1</span></div>
  <div><span>slide 2</span></div>
  <div><span>slide 3</span></div>
  <div><span>slide 4</span></div>
  <div><span>slide 5</span></div>
  <div><span>slide 6</span></div>
  <div><span>slide 7</span></div>
  <div><span>slide 8</span></div>    
</header>

CSS

header {
    margin-top: 10px;
    width: 800px;
    overflow: hidden;
    height: 500px;
}
header div {
    background-color: #000;
    width: 43.8px;
    height: 200px;
    position: relative;
    float: left;
    -webkit-transition: width .3s;
    transition: width .3s;
    overflow: hidden;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    margin-right: 2px;
}
header div:first-child {
    margin-left: 0px;
}
header div:last-child {
    margin-right: 0px;
}
header div:hover span {
    left: 50px;
    opacity: 1;
}
header div img {
    position: relative;
    left: -240px;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-filter: grayscale(1);
    overflow:hidden;
}
header div span {
    -webkit-transition: left .3s;
    transition: left .3s;
    position: absolute;
    bottom: 30px;
    color: white;
    left: -350px;
    opacity: 0;
    width: 450px;
    font-family:'Fugaz One', cursive;
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    text-shadow: 0px 0px 10px #f1f1f1;
    filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header:hover > div {
    width: 43.8px;
}
header:hover > div:hover {
    width: 150px;
}

这是一个JSFiddle

所以问题是，我怎样才能在动画上设置停止几毫秒，以便动画可以在再次触发之前完成？

希望我的问题很清楚！

（感谢编辑）

4

2 回答 2

2

有人可能会称我的回答是一种解决方法。也许是这样，但根据我对ExtPro 答案的评论——它仍然是完全纯 CSS。
我决定使用display: table-cell，因为表格单元格的宽度是均匀分布的。

所以，CSS 可能看起来像这样：
提示：这只是一堆必要的 CSS。所有代码都在 jsFiddle

header {
    width: 368px;
    display: table;
    overflow: hidden;
}
header > div {
    width: 44px;
    height: 200px;
    position: relative;
    -webkit-transition: width .3s;
    transition: width .3s;
    display: table-cell;
    overflow: hidden;
}
header > div:hover {
    width: 151px;
}

小提琴

如您所见，我们不必确定所有未悬停的div 的宽度。实际上，问题来自那个非常 CSS 规则：

/* DON'T USE THIS RULE - IT'S THE RULE WHICH WAS BAD */
header:hover > div {
    width: 43.8px;
}

您正在更改 div 的宽度header:hover，因此当转换未能及时完成工作时，您会用鼠标指向标题但指向非div。

于 2013-11-12T13:45:34.750 回答
1

如果我理解您所说的“窃听”的意思，那么发生的情况是，如果您将鼠标快速向右移动，它会遍历当前打开的 div 并留在该 div 折叠时不包含的区域（例如鼠标未悬停）下一个以扩展它-即以下div的悬停事件未触发，因此它们不会扩展。恐怕不会有 CSS 修复，因为它与浏览器相关，你可能想用 jQuery/JS 替换。

于 2013-11-12T12:24:43.270 回答