Animasyon CSS3: görüntü + opaklık

CSS3 animasyonuyla ilgili bir sorunum var.

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

Bu kod yalnızca değişikliklerini kaldırırsam çalışır display.

Fareyle üzerine geldikten hemen sonra ekranı değiştirmek istiyorum, ancak opaklık geçiş kullanılarak değiştirilmelidir.

Michaels cevabına göre bu kullanılacak gerçek CSS kodudur

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

Mümkünse - visibilityyerine kullanındisplay

Örneğin:

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}

CSS animasyonları ile şunları yapabilirsiniz:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

Bu geçici çözüm çalışır:

1. bir "anahtar kare" tanımlayın:

   @-webkit-keyframes fadeIn { 
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   
   @keyframes fadeIn {
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   

2. "Fareyle üzerine gelindiğinde" bu "animasyon karesini" kullanın:

   div a span { 
     display: none;
   }
   
   div a:hover span {
     display: block;
   
     -webkit-animation-name: fadeIn;
     -webkit-animation-duration: 1s;
     animation-name: fadeIn;
     animation-duration: 1s;
   }
   

Bunu başarmak için kullandım. Gezinirken kaybolurlar ama gizlendiklerinde yer kaplamazlar, mükemmel!

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover .child {
    height: auto;
    opacity: 1;
    visibility: visible;
}

Biraz değiştim ama sonuç çok güzel.

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

Herkese teşekkürler.

İşaretçi olaylarını kullanarak bunu yapmanın başka bir iyi yöntemi vardır:

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

Maalesef bu, IE10 ve altında desteklenmemektedir.

Ben de aynı sorunu yaşadım. @MichaelMullany ve @Chris tarafından önerildiği gibi geçişler yerine animasyonlar kullanmayı denedim, ancak "-moz" ve "-o" önekleriyle kopyalayıp yapıştırsam bile yalnızca webkit tarayıcıları için çalıştı.

Yerine kullanarak sorunu visibilityaşabildim display. Bu benim için işe yarıyor çünkü alt öğem öyle position: absolute, bu nedenle belge akışı etkilenmiyor. Başkaları için de işe yarayabilir.

Çözümüm kullanıldığında orijinal kod şöyle görünecektir:

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}

JS ile değişikliği tetikliyorsanız, diyelim ki tıklama ile, güzel bir çözüm var.

Sorunun, animasyonun ekranda göz ardı edilmesinden kaynaklandığını görüyorsunuz: hiçbir öğe, ancak tarayıcı tüm değişiklikleri bir kerede uygulamaz ve öğe hiçbir zaman görüntülenmez: aynı anda canlandırılmamışken blok .

İşin püf noktası, tarayıcıdan çerçeveyi görünürlüğü değiştirdikten sonra ancak animasyonu tetiklemeden önce oluşturmasını istemektir.

İşte bir JQuery örneği:

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);

Mutlak veya sabit elemanlarda z-endeksini de kullanabilirsiniz:

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

Diğer öğelerin şimdi -100 ile 100 arasında bir z-endeksi olmalıdır.

Biliyorum, bu gerçekten sorunuz için bir çözüm değil, çünkü siz soruyorsunuz

görüntü + opaklık

Yaklaşımım daha genel bir soruyu çözüyor, ancak belki de bu, displayile birlikte kullanılarak çözülmesi gereken arka plan problemiydi opacity.

Arzum, Elementi görünmezken yoldan çekmekti. Bu çözüm tam olarak şunu yapar: Öğeyi uzağa taşır ve bu geçiş için kullanılabilir:

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

Bu kod, herhangi bir tarayıcı öneki veya geriye dönük uyumluluk korsanlığı içermez. Artık ihtiyaç duyulmadığından, öğenin nasıl uzaklaştığı kavramını gösteriyor.

İlginç olan kısım, iki farklı geçiş tanımıdır. Fare işaretçisi .parentöğenin üzerine geldiğinde , .childöğenin hemen yerine yerleştirilmesi gerekir ve ardından opaklık değişecektir:

transition: left 0s, visibility 0s, opacity 0.8s;

Fareyle üzerine gelme olmadığında veya fare işaretçisi öğenin dışına taşındığında, öğe ekrandan taşınmadan önce opaklık değişikliğinin bitmesini beklemek gerekir:

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

Nesneyi uzaklaştırmak, ayarın display:nonedüzeni bozmayacağı bir durumda uygun bir alternatif olacaktır.

Umarım bu soruya cevap vermemiş olsam da kafama çivi çakarım.

Yaptığım bir şey, başlangıç ​​durumunun marjını "margin-left: -9999px" gibi bir şeye ayarlamak, böylece ekranda görünmeyecek ve ardından "margin-left: 0" üzerine gelme durumunda sıfırlandı. Bu durumda "display: block" olarak kalsın. Benim için hile yaptım :)

Düzenle: Durum kaydedilsin ve önceki fareyle üzerine gelme durumuna geri dönülmesin mi? Tamam burada JS'ye ihtiyacımız var:

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>

OnHoverIn / Out üzerinde her iki yönde animasyona sahip olmak için bu çözümü yaptım. Umarım birine yardımcı olur

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}

CSS İLE OPASİTE NASIL ANİMASYON YAPILIR:
bu benim kodum:
CSS kodu

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

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}

<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>

veya bu demo dosyasını kontrol edin

function
vot () { var vot = getElementById ("yourOpinion")
if (this.workWithYou): vot
+ = 1};
lol

display:geçiş yapılamaz. Yapmak istediğiniz şeyi yapmak için muhtemelen jQuery kullanmanız gerekecektir.