目前我正在处理带有滑块动画的标题(仅限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;
}
所以问题是,如何在动画上停留几毫秒,以便动画可以在再次触发之前完成?
希望我的问题很明确!
(感谢编辑)
答案 0 :(得分:2)
有人可能会将我的回答称为解决方法。也许这是根据我对ExtPro's answer的评论 - 它仍然是完全纯粹的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;
}
您正在更改header:hover
上的div的宽度,因此当转换无法及时完成其工作时,您出现了鼠标指向标题,但非强大的div。
答案 1 :(得分:1)
如果我理解“窃听”是什么意思,发生的事情就是如果你快速向右移动鼠标,它会遍历当前打开的div并留在一个区域,当该div崩溃时,不包含(例如,鼠标不会悬停在下一个上面以便扩展它 - 即下一个div的悬停事件不会被触发,因此它们不会扩展。不会有CSS修复这个我担心它的浏览器相关,你可能想用jQuery / JS替换。