0

画像の後にホバーするときに、いくつかの素敵なトランジション効果を実現しようとしています(マウスと同じ方向から表示されるホバーdiv)。

「ホバーイン」トランジションが直線ではなく、対角線と塗りつぶしのような方法であることを除いて、すべて正常に機能します。 ）。

通常の状態:

<div class="hover_effect initial_hover slideFromLeft" style="display: block;">link aici</div>

ホバー状態 (クラスは jQuery 経由で削除および追加されます):

<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>

正常に機能するホバーアウト遷移のように、動きを直線にしたい。バグを指摘してもらえますか？

これはhtmlとcssコードです：

<div class="portfolio-sample regular-portfolio coding-2   isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px);">
<img width="455" height="295" src="http://localhost/wp-content/uploads/2013/01/env0251-455x295.jpg" class="attachment-portfolio-two wp-post-image" alt="env025">        
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
<div class="custom_slider_shadow"></div>
</div>

ありがとうございました！

 .hover_effect{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.initial_hover{
position: absolute;
background: rgba(75,75,75,0.7);
width: 378px;
height: 245px;
top: 260px;
}

.slideFromLeft {
top: 0px; 
left: -378px;
}

.slideLeft {
left: 0px;
}

回答 : OK わかりました。これは、ホバー時に slideFromLeft の後に initial_hover クラスが追加されたためです。これらを元に戻すと、期待どおりに機能します

4

1 に答える 1

2

非線形と指定されているため、線形ではありません。直線的なトランジションが必要な場合は、 のスタイリングでと の両方ease-in-outをeaseに変更する必要があります。linear.hover_effect

于 2013-02-13T13:36:38.497 に答える