คำถามติดแท็ก css-transitions

ในซอด้านล่างฉันได้เปลี่ยนการมองเห็นและความทึบแยกกัน ผลงานหลังทำ แต่อดีตไม่ทำ ยิ่งไปกว่านั้นในกรณีของการมองเห็นเวลาในการเปลี่ยนแปลงจะถูกตีความว่าล่าช้าเมื่อวางเมาส์เหนือ เกิดขึ้นทั้งใน 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; }

108 css  css-transitions 

เป็นไปได้ไหมที่จะได้รับการแจ้งเตือน (เช่นการติดต่อกลับ) เมื่อการเปลี่ยน CSS เสร็จสมบูรณ์

100 javascript  css  css-transitions 

ฉันกำลังพยายามใช้เอฟเฟกต์ "จางหาย" ใน CSS แท้ นี่คือไวโอลิน ฉันได้ดูวิธีแก้ปัญหาสองสามวิธีทางออนไลน์อย่างไรก็ตามหลังจากอ่านเอกสารทางออนไลน์ฉันพยายามหาสาเหตุที่ภาพเคลื่อนไหวสไลด์ไม่ทำงาน คำแนะนำใด ๆ .dummy-wrap { animation: slideup 2s; -moz-animation: slideup 2s; -webkit-animation: slideup 2s; -o-animation: slideup 2s; } .success-wrap { width: 75px; min-height: 20px; clear: both; margin-top: 10px; } .successfully-saved { color: #FFFFFF; font-size: 20px; padding: 15px 40px; margin-bottom: 20px; text-align: center; -webkit-border-radius: 5px; …

96 css  css-transitions 

เหตุการณ์สิ้นสุดการเปลี่ยนแปลงของ Webkit เรียกว่า webkitTransitionEnd, Firefox คือ transitionEnd โอเปร่าคือ oTransitionEnd วิธีที่ดีในการจัดการกับ JS ทั้งหมดคืออะไร? ฉันควรดมเบราว์เซอร์หรือไม่? หรือใช้แต่ละอันแยกกัน? วิธีอื่นที่ไม่ได้เกิดขึ้นกับฉัน? กล่าวคือ: //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); หรือ // Assigning an event listener per browser element.addEventListener("webkitTransitionEnd", fn); element.addEventListener("oTransitionEnd", fn); …

91 javascript  css  css-transitions  dom-events 

ฉันเขียนโค้ดสคริปต์ (ด้วยความช่วยเหลือของผู้ใช้ที่นี่) ซึ่งช่วยให้ฉันขยาย div ที่เลือกและทำให้ div อื่นทำงานตามนั้นโดยยืดให้เท่ากันเพื่อให้พอดีกับพื้นที่ที่เหลือ (ยกเว้นอันแรกที่ความกว้างคงที่) และนี่คือภาพของสิ่งที่ฉันต้องการบรรลุ: เพื่อที่ฉันใช้ดิ้นและการเปลี่ยน ใช้งานได้ดี แต่สคริปต์ jQuery ระบุค่าการยืด "400%" (ซึ่งเหมาะสำหรับการทดสอบ) ตอนนี้ฉันต้องการให้ div ที่เลือกเพื่อขยาย / ย่อขนาดให้พอดีกับเนื้อหาแทนค่าคงที่ "400%" ฉันไม่รู้ว่าจะทำอย่างไร เป็นไปได้ไหม ? ฉันพยายามโคลน div ให้พอดีกับเนื้อหารับค่าจากนั้นใช้ค่านี้เพื่อเปลี่ยน แต่นั่นหมายความว่าฉันมีความกว้างเริ่มต้นเป็นเปอร์เซ็นต์ แต่เป็นค่าเป้าหมายเป็นพิกเซล ไม่ได้ผล และถ้าฉันแปลงค่าพิกเซลเป็นเปอร์เซ็นต์ผลลัพธ์จะไม่ตรงกับเนื้อหาไม่ว่าจะด้วยเหตุผลใดก็ตาม ในทุกกรณีนี่เป็นวิธีที่ซับซ้อนเล็กน้อยในการบรรลุสิ่งที่ฉันต้องการอยู่แล้ว ไม่มีคุณสมบัติยืดหยุ่นใด ๆ ที่สามารถเปลี่ยนเพื่อให้พอดีกับเนื้อหาของ div ที่เลือกหรือไม่ นี่คือรหัส ( แก้ไข / ลดความเรียบง่ายตั้งแต่อ่านดีขึ้น ): var expanded = ''; $(document).on("click", ".div:not(:first-child)", …

9 javascript  jquery  css  flexbox  css-transitions