ภาพเคลื่อนไหว CSS3: การแสดงผล + ความทึบ

ฉันมีปัญหากับภาพเคลื่อนไหว 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;
}

รหัสนี้ใช้ได้เฉพาะเมื่อฉันลบการเปลี่ยนแปลงของdisplay.

ฉันต้องการเปลี่ยนการแสดงผลหลังจากเลื่อนเมาส์ไปแล้ว แต่ควรเปลี่ยนความทึบโดยใช้การเปลี่ยน

จากคำตอบของ Michaels นี่คือรหัส CSS จริงที่จะใช้

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

ถ้าเป็นไปได้ - ใช้ visibilityแทนdisplay

ตัวอย่างเช่น:

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

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

วิธีแก้ปัญหานี้ใช้ได้ผล:

1. กำหนด "คีย์เฟรม":

   @-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. ใช้ "คีย์เฟรม" นี้ใน "โฮเวอร์":

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

ฉันใช้สิ่งนี้เพื่อบรรลุมัน พวกเขาจางหายไป แต่ไม่มีที่ว่างเมื่อซ่อนอยู่สมบูรณ์แบบ!

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

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

ฉันเปลี่ยนไปเล็กน้อย แต่ผลลัพธ์ก็สวยงาม

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

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

ขอบคุณทีมงานทุกคน

มีอีกวิธีที่ดีในการทำสิ่งนี้โดยใช้ตัวชี้เหตุการณ์:

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

ขออภัยสิ่งนี้ไม่รองรับใน IE10 และต่ำกว่า

ผมมีปัญหาเหมือนกัน. ฉันลองใช้ภาพเคลื่อนไหวแทนการเปลี่ยน - ตามที่ @MichaelMullany และ @Chris แนะนำ - แต่ใช้ได้กับเบราว์เซอร์ webkit เท่านั้นแม้ว่าฉันจะคัดลอกวางด้วยคำนำหน้า "-moz" และ "-o" ก็ตาม

ฉันสามารถแก้ไขปัญหาโดยใช้visibilityแทนdisplayไฟล์. สิ่งนี้ใช้ได้กับฉันเพราะองค์ประกอบลูกของฉันเป็นposition: absoluteดังนั้นการไหลของเอกสารจึงไม่ได้รับผลกระทบ อาจใช้ได้ผลกับคนอื่นด้วย

นี่คือลักษณะของรหัสเดิมเมื่อใช้โซลูชันของฉัน:

.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 สมมติว่าเมื่อคลิกมีวิธีแก้ปัญหาที่ดี

คุณเห็นว่าปัญหาเกิดขึ้นเนื่องจากภาพเคลื่อนไหวถูกละเว้นบนหน้าจอ: ไม่มีองค์ประกอบ แต่เบราว์เซอร์ใช้การเปลี่ยนแปลงทั้งหมดพร้อมกันและองค์ประกอบจะไม่แสดง: บล็อกในขณะที่ไม่เคลื่อนไหวในเวลาเดียวกัน

เคล็ดลับคือขอให้เบราว์เซอร์แสดงเฟรมหลังจากเปลี่ยนการมองเห็น แต่ก่อนที่จะเรียกใช้ภาพเคลื่อนไหว

นี่คือตัวอย่าง 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);

สำหรับองค์ประกอบที่แน่นอนหรือคงที่คุณสามารถใช้ดัชนี z:

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

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

องค์ประกอบอื่น ๆ ควรมีดัชนี z ระหว่าง -100 ถึง 100 ในขณะนี้

ฉันรู้ว่านี่ไม่ใช่วิธีแก้ปัญหาสำหรับคำถามของคุณเพราะคุณถาม

จอแสดงผล + ความทึบ

วิธีการของฉันช่วยแก้คำถามทั่วไป แต่บางทีนี่อาจเป็นปัญหาเบื้องหลังที่ควรแก้ไขโดยใช้displayร่วมกับopacity.

ความปรารถนาของฉันคือการทำให้ Element หมดไปเมื่อมองไม่เห็น วิธีนี้ทำได้อย่างนั้น: มันย้ายองค์ประกอบออกจากที่อยู่ห่างออกไปและสามารถใช้สำหรับการเปลี่ยนแปลง:

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

รหัสนี้ไม่มีคำนำหน้าเบราว์เซอร์หรือแฮ็กที่เข้ากันได้ย้อนหลัง เพียงแค่แสดงให้เห็นแนวคิดว่าองค์ประกอบถูกเคลื่อนย้ายออกไปอย่างไรเนื่องจากไม่ต้องการอีกต่อไป

ส่วนที่น่าสนใจคือคำจำกัดความการเปลี่ยนแปลงสองแบบที่แตกต่างกัน เมื่อตัวชี้เมาส์วางเมาส์เหนือ.parentองค์ประกอบ.childจะต้องวางองค์ประกอบทันทีจากนั้นความทึบจะเปลี่ยนไป:

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

เมื่อไม่มีการวางเมาส์หรือตัวชี้เมาส์ถูกย้ายออกจากองค์ประกอบจะต้องรอจนกว่าการเปลี่ยนแปลงความทึบจะเสร็จสิ้นก่อนจึงจะสามารถย้ายองค์ประกอบออกจากหน้าจอได้:

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

การย้ายวัตถุออกไปจะเป็นทางเลือกที่ใช้ได้ในกรณีที่การตั้งค่าdisplay:noneจะไม่ทำให้เค้าโครงเสียหาย

ฉันหวังว่าฉันจะตอกตะปูบนหัวสำหรับคำถามนี้แม้ว่าฉันจะไม่ได้ตอบก็ตาม

สิ่งหนึ่งที่ฉันทำคือตั้งค่าระยะขอบของสถานะเริ่มต้นเป็น "ระยะขอบซ้าย: -9999px" เพื่อไม่ให้ปรากฏบนหน้าจอจากนั้นรีเซ็ต "ระยะขอบซ้าย: 0" ในสถานะวางเมาส์เหนือ เก็บไว้เป็น "display: block" ในกรณีนั้น เคล็ดลับสำหรับฉัน :)

แก้ไข: บันทึกสถานะและไม่เปลี่ยนกลับไปเป็นสถานะโฮเวอร์ก่อนหน้า? ตกลงที่นี่เราต้องการ 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>

หากต้องการมีภาพเคลื่อนไหวทั้งสองวิธีบน HoverIn / Out ฉันทำวิธีนี้ หวังว่าจะช่วยให้ใครบางคน

@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:
นี่คือรหัสของฉัน:
รหัส 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>

หรือตรวจสอบไฟล์สาธิตนี้

ฟังก์ชั่นโหวต () {
var vote = getElementById ("yourOpinion")
if (this.workWithYou):
โหวต + = 1};
ฮ่า ๆ

display:ไม่สามารถเปลี่ยนแปลงได้ คุณอาจจะต้องใช้ jQuery เพื่อทำสิ่งที่คุณต้องการทำ