CSS: opasitas transisi saat mouse-out?

115 
.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;
    }

Mengapa ini hanya menganimasikan opasitas saat saya mengarahkan kursor, tetapi tidak saat saya meninggalkan objek dengan mouse?

Demo di sini: http://jsfiddle.net/7uR8z/

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

css css-transitions Matt
sumber
Saya menggunakan Safari dan bekerja dengan sempurna bahkan ketika saya meninggalkan objek dengan mouse ... Apa masalahnya?
AleVale94
Tidak, tidak berhasil untuk saya! Transisi berfungsi saat saya mengarahkan kursor ke kotak merah! Saat meninggalkan kotak merah dengan mouse, ia "melompat" kembali ke opasitas penuh - saya ingin itu juga beranimasi saat mouse-out!
matt
Mengapa tidak menggunakan filter ... caniuse.com/#search=filter
DevWL

Jawaban:

202

Anda menerapkan transisi hanya ke :hoverpseudo-class, dan bukan ke elemen itu sendiri.

.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;
}

Demo: http://jsfiddle.net/7uR8z/6/

Jika Anda tidak ingin transisi memengaruhi mouse-overacara, tetapi hanya mouse-out, Anda dapat menonaktifkan transisi untuk :hoverstatus:

.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;
}

Demo: http://jsfiddle.net/7uR8z/3/

Sampson
sumber
2

Saya berhasil menemukan solusi menggunakan css / jQuery yang saya sukai. Masalah asli: Saya harus memaksa visibilitas untuk ditampilkan saat menganimasikan karena saya memiliki elemen yang tergantung di luar area. Melakukannya, membuat blok teks besar sekarang menggantung di luar area konten selama animasi juga.

Solusinya adalah memulai elemen teks utama dengan opacity 0 dan gunakan addClassuntuk memasukkan dan transisi ke opacity 1. Kemudian removeClasssaat diklik lagi.

Saya yakin ada cara jQquery untuk melakukan ini. Aku bukan orang yang melakukannya. :)

Jadi dalam bentuk paling dasar ...

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

Terima kasih atas bantuan semuanya.

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

Periksa biola: http://jsfiddle.net/2k3hfwo0/2/

Peter Darmis
sumber