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 に答える