การเปลี่ยน CSS ด้วยการมองเห็นไม่ทำงาน

ในซอด้านล่างฉันได้เปลี่ยนการมองเห็นและความทึบแยกกัน ผลงานหลังทำ แต่อดีตไม่ทำ ยิ่งไปกว่านั้นในกรณีของการมองเห็นเวลาในการเปลี่ยนแปลงจะถูกตีความว่าล่าช้าเมื่อวางเมาส์เหนือ เกิดขึ้นทั้งใน Chrome และ Firefox นี่คือบั๊กหรือไม่?

http://jsfiddle.net/0r218mdo/3/

กรณีที่ 1:

#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}

กรณีที่ 2:

#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}

นี่ไม่ใช่ข้อผิดพลาด - คุณสามารถเปลี่ยนคุณสมบัติตามลำดับ / คำนวณได้เท่านั้น (วิธีง่ายๆในการคิดว่านี่คือคุณสมบัติใด ๆ ที่มีค่าเริ่มต้นและเลขท้ายเป็นตัวเลข. แม้ว่าจะมีข้อยกเว้นบางประการ)

เนื่องจากการเปลี่ยนทำงานโดยการคำนวณคีย์เฟรมระหว่างค่าสองค่าและสร้างภาพเคลื่อนไหวโดยการคาดคะเนจำนวนกลาง

visibility ในกรณีนี้คือการตั้งค่าไบนารี (มองเห็น / ซ่อน) ดังนั้นเมื่อระยะเวลาการเปลี่ยนแปลงผ่านไปคุณสมบัติก็แค่เปลี่ยนสถานะคุณจะเห็นว่านี่เป็นการหน่วงเวลา - แต่จริงๆแล้วสามารถมองเห็นได้ว่าเป็นคีย์เฟรมสุดท้ายของภาพเคลื่อนไหวการเปลี่ยนแปลงโดยมี ไม่ได้คำนวณคีย์เฟรมของตัวกลาง (ค่าใดที่ถือว่าเป็นค่าระหว่างซ่อน / มองเห็นได้ความทึบมิติหรือไม่เนื่องจากไม่ชัดเจนจึงไม่คำนวณ)

opacity เป็นการตั้งค่า (0-1) ดังนั้นจึงสามารถคำนวณคีย์เฟรมได้ตลอดระยะเวลาที่ให้ไว้

รายการคุณสมบัติที่เปลี่ยนแปลงได้ (เคลื่อนไหวได้) มีอยู่ที่นี่

การมองเห็นเป็นภาพเคลื่อนไหว ตรวจสอบโพสต์ในบล็อกนี้: http://www.greywyvern.com/?post=337

คุณสามารถดูได้ที่นี่เช่นกัน: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

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

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}

<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

การมองเห็นเป็นคุณสมบัติที่เคลื่อนไหวได้ตามข้อมูลจำเพาะ แต่การเปลี่ยนการมองเห็นไม่ทำงานอย่างค่อยเป็นค่อยไปอย่างที่คาดไว้ การเปลี่ยนการหน่วงเวลาการมองเห็นแทนการซ่อนองค์ประกอบ ในทางกลับกันการทำให้มองเห็นองค์ประกอบได้ผลทันที นี่คือตามที่กำหนดโดยข้อมูลจำเพาะ (ในกรณีของฟังก์ชันจับเวลาเริ่มต้น) และตามที่มีการใช้งานในเบราว์เซอร์

นี่เป็นพฤติกรรมที่มีประโยชน์เนื่องจากในความเป็นจริงเราสามารถจินตนาการถึงเอฟเฟกต์ภาพต่างๆเพื่อซ่อนองค์ประกอบได้ การทำให้องค์ประกอบจางลงเป็นเพียงเอฟเฟ็กต์ภาพชนิดหนึ่งที่ระบุโดยใช้ความทึบ เอฟเฟกต์ภาพอื่น ๆ อาจย้ายองค์ประกอบออกไปโดยใช้เช่นคุณสมบัติการแปลงดูhttp://taccgl.org/blog/css-transition-visibility.html

การผสมผสานการเปลี่ยนความทึบเข้ากับการเปลี่ยนการมองเห็นมักมีประโยชน์! แม้ว่าความทึบดูเหมือนจะทำในสิ่งที่ถูกต้อง แต่องค์ประกอบที่โปร่งใสเต็มที่ (ที่มีความทึบ: 0) ยังคงได้รับเหตุการณ์ของเมาส์ ดังนั้นเช่นลิงก์ในองค์ประกอบที่จางหายไปโดยมีการเปลี่ยนความทึบเพียงอย่างเดียว แต่ยังคงตอบสนองต่อการคลิก (แม้ว่าจะมองไม่เห็น) และลิงก์ที่อยู่เบื้องหลังองค์ประกอบที่จางจะไม่ทำงาน (แม้ว่าจะมองเห็นได้ผ่านองค์ประกอบที่จาง) ดูhttp://taccgl.org/blog/css-transition-opacity-for-fade-effects.html

พฤติกรรมแปลก ๆ นี้สามารถหลีกเลี่ยงได้โดยใช้การเปลี่ยนทั้งสองอย่างการเปลี่ยนการมองเห็นและการเปลี่ยนความทึบ ดังนั้นคุณสมบัติการมองเห็นจะถูกใช้เพื่อปิดใช้งานเหตุการณ์ของเมาส์สำหรับองค์ประกอบในขณะที่ใช้ความทึบสำหรับเอฟเฟกต์ภาพ อย่างไรก็ตามต้องใช้ความระมัดระวังไม่ให้ซ่อนองค์ประกอบในขณะที่เอฟเฟกต์ภาพกำลังเล่นซึ่งมิฉะนั้นจะมองไม่เห็น นี่คือความหมายพิเศษของการเปลี่ยนแปลงการมองเห็นมีประโยชน์ เมื่อซ่อนองค์ประกอบองค์ประกอบจะยังคงมองเห็นได้ในขณะที่เล่นเอฟเฟกต์ภาพและจะถูกซ่อนในภายหลัง ในทางกลับกันเมื่อเปิดเผยองค์ประกอบการเปลี่ยนการมองเห็นจะทำให้มองเห็นองค์ประกอบได้ทันทีกล่าวคือก่อนเล่นเอฟเฟ็กต์ภาพ