Animasi CSS3: tampilan + opasitas

Saya punya masalah dengan animasi CSS3.

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

Kode ini hanya berfungsi jika saya menghapus perubahan display.

Saya ingin mengubah tampilan tepat setelah hover tetapi opacity harus diubah menggunakan transisi.

Berdasarkan jawaban Michaels ini adalah kode CSS yang sebenarnya untuk digunakan

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

Anda dapat melakukannya dengan animasi CSS:

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

Jika memungkinkan - gunakan visibilitysebagai penggantidisplay

Misalnya:

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

Solusi ini berfungsi:

1. tentukan "bingkai utama":

   @-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. Gunakan "bingkai utama" ini saat "arahkan kursor":

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

Saya menggunakan ini untuk mencapainya. Mereka memudar saat melayang tetapi tidak mengambil ruang saat disembunyikan, sempurna!

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

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

Saya berubah sedikit tetapi hasilnya indah.

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

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

Terimakasih semuanya.

Ada metode lain yang bagus untuk menyelesaikan ini dengan menggunakan pointer-events:

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

Sayangnya, ini tidak didukung di IE10 dan di bawahnya.

Saya memiliki masalah yang sama. Saya mencoba menggunakan animasi alih-alih transisi - seperti yang disarankan oleh @MichaelMullany dan @Chris - tetapi itu hanya berfungsi untuk browser webkit bahkan jika saya menyalin-tempel dengan awalan "-moz" dan "-o".

Saya bisa mendapatkan sekitar masalah dengan menggunakan visibilitybukannyadisplay . Ini berfungsi untuk saya karena elemen anak saya position: absolute, jadi aliran dokumen tidak terpengaruh. Mungkin berhasil untuk orang lain juga.

Beginilah tampilan kode asli menggunakan solusi saya:

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

Jika Anda memicu perubahan dengan JS, katakanlah saat mengklik, ada solusi yang bagus.

Anda melihat masalah terjadi karena animasi diabaikan di display: tidak ada elemen kecuali browser menerapkan semua perubahan sekaligus dan elemen tidak pernah display: blok sementara tidak dianimasikan pada saat yang sama.

Triknya adalah meminta browser untuk merender bingkai setelah mengubah visibilitas tetapi sebelum memicu animasi.

Berikut adalah contoh JQuery:

    $('.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);

Pada elemen absolut atau tetap, Anda juga bisa menggunakan z-index:

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

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

Elemen lain harus memiliki indeks-z antara -100 dan 100 sekarang.

Saya tahu, ini bukanlah solusi untuk pertanyaan Anda, karena Anda memintanya

tampilan + opasitas

Pendekatan saya memecahkan pertanyaan yang lebih umum, tetapi mungkin ini adalah masalah latar belakang yang harus diselesaikan dengan menggunakan displaykombinasi denganopacity .

Keinginan saya adalah menyingkirkan Elemen saat tidak terlihat. Solusi ini melakukan persis seperti itu: Ini memindahkan elemen keluar, dan ini dapat digunakan untuk transisi:

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

Kode ini tidak mengandung awalan browser atau retasan kompatibilitas mundur. Itu hanya menggambarkan konsep bagaimana elemen dipindahkan karena tidak diperlukan lagi.

Bagian yang menarik adalah dua definisi transisi yang berbeda. Saat penunjuk mouse mengarahkan .parentelemen, .childelemen harus segera dipasang dan opasitas akan berubah:

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

Jika tidak ada hover, atau penunjuk mouse dipindahkan dari elemen, seseorang harus menunggu hingga perubahan opasitas selesai sebelum elemen dapat dipindahkan dari layar:

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

Memindahkan objek akan menjadi alternatif yang layak jika pengaturan display:nonetidak akan merusak tata letak.

Saya harap saya tepat sasaran untuk pertanyaan ini meskipun saya tidak menjawabnya.

Satu hal yang saya lakukan adalah menyetel margin status awal menjadi sesuatu seperti "margin-left: -9999px" sehingga tidak muncul di layar, lalu setel ulang "margin-left: 0" pada status hover. Dalam kasus itu, simpan "display: block". Melakukan trik untuk saya :)

Edit: Simpan status dan tidak kembali ke status hover sebelumnya? Ok disini kita butuh JS:

<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>

Untuk memiliki animasi di kedua cara onHoverIn / Out saya melakukan solusi ini. Semoga bisa membantu seseorang

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

CARA MENGANIMASI OPASITAS DENGAN CSS:
ini adalah kode saya:
kode CSS

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

atau periksa file demo ini

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

display:tidak dapat dialihkan. Anda mungkin perlu menggunakan jQuery untuk melakukan apa yang ingin Anda lakukan.