web-dev-qa-db-ja.com

CSS：マウスアウト時の不透明度の変化

.item:hover {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
    }

マウスポインタを置いたときに不透明度がアニメ化されるだけで、マウスでオブジェクトを離れたときにアニメートされないのはなぜですか。

ここにデモ： http://jsfiddle.net/7uR8z/

</s></s></s></s></s></s></s></s>

csscss3css-transitions
99
matt

あなたは:hover疑似クラスだけにトランジションを適用していて、要素自体には適用していません。

.item {   
  height:200px;
  width:200px;
  background:red; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

デモ： http://jsfiddle.net/7uR8z/6/

遷移がmouse-overイベントに影響を与えず、mouse-outだけに影響を与えたくない場合は、:hover状態に対して遷移をオフにすることができます。

.item:hover {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

デモ： http://jsfiddle.net/7uR8z/3/

184
Sampson

私はcss/jQueryを使用して、私が快適な解決策を見つけることができました。元の問題：領域の外側に要素がぶら下がっているため、アニメーション表示中に表示を強制的に表示する必要がありました。そうすることで、大きなテキストブロックがアニメーション中にもコンテンツ領域の外側にハングするようになりました。

解決策は、メインテキスト要素を不透明度0で開始し、addClassを使用して不透明度1に注入して移行することでした。次に、もう一度クリックするとremoveClassになります。

私はこれを行うためのすべてのjQqueryの方法があると確信しています。私はそれをする人ではありません。 :)

だから、それは最も基本的な形では...

.slideDown().addClass("load");
.slideUp().removeClass("load");

みんな助けてくれてありがとう。

2
Sektion66
$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

フィドルをチェックしてください： http://jsfiddle.net/2k3hfwo0/2/

1
Peter Darmis