การเปลี่ยน CSS ใน Edge และ IE11 ไม่ทำงาน

ฉันไม่พบปัญหา CSS บ่อยนัก แต่สิ่งนี้ทำให้ฉันเกาหัว

ใน http://plnkr.co/i2Fxol เสียงพึมพำนี้ ทุกอย่างทำงานได้ตรงตามที่คาดไว้ในทุกเบราว์เซอร์ โดยมี ข้อยกเว้นของ IE10 และ 11 และ Edge ล้มเหลวโดยสิ้นเชิงในการใช้การเปลี่ยน css กับองค์ประกอบ บางส่วน ไม่ใช่ทั้งหมด และไม่ว่าฉันจะดูมันมากแค่ไหน ฉันก็ไม่เข้าใจว่าทำไมมันถึงล้มเหลวในสถานที่เหล่านั้น (เพิ่ม CSS ที่นี่ แต่จำเป็นต้องเห็นในบริบทเนื่องจากนี่เป็นมุมมองที่เรียบง่ายจริงๆ)

#navigation ul {
  display: block;
  list-style: none;
  overflow: hidden;
  transition: all .2s ease;
}

โดยพื้นฐานแล้ว มันจะเรอเมื่อหีบเพลงเปิดอยู่ และเมนูต่างๆ สามารถขยายและย่อได้ภายใน 0.2 วินาทีที่ระบุไว้ การเปลี่ยนภาพอื่นๆ ทั้งหมดใช้งานได้

โอ้ และตอนนี้ฉันก็มีวิธีที่จะเพิ่มการปิดเส้นทาง svg ภายใน HTML5 เพียงเพื่อลบคำเตือนที่ไม่มีจุดหมายเหล่านั้นใน IE และ Edge

แก้ไข

ความสูงเริ่มต้นของหีบเพลงจะรวบรวมตามน้ำหนักบรรทุกดังนี้:

...
var initialHeights = document.getElementsByClassName("level-1");
var values = [];
for(var i = 0; initialHeights.length > i; i++){
  values.push(initialHeights[i].offsetHeight);
}
...

จากนั้นจะมีค่าศูนย์อยู่ในแนวเดียวกับค่าที่เก็บไว้อย่างปลอดภัยในอาร์เรย์โดยใช้:

function toZero(){
  for(i = 0; mainSubMenus.length > i; i++){
    mainSubMenus[i].setAttribute("style", "height:0;");
  }
}
toZero();

ซึ่งช่วยให้สามารถใช้ CSS เพื่อเปลี่ยนระหว่างความสูงเป็นศูนย์และค่าที่ทราบได้

ผายลม

ฉันคิดว่าบางทีสิ่งต่อไปนี้อาจรักษาความเจ็บป่วยได้:

mainSubMenus[i].style.height = 0;

ฉันผิดไป.


javascript css internet-explorer microsoft-edge
person Stuart Harding    schedule 27.07.2016    source แหล่งที่มา
comment
คุณกำลังสร้างภาพเคลื่อนไหวองค์ประกอบใดๆ ตั้งแต่ display: none ถึง display: block หรือไม่   -  person Ason    schedule 27.07.2016
comment
ไม่หรอก ส่วนสูง ความสูงจะถูกดึงมาจากโหลดเมื่อทราบความสูงขององค์ประกอบก่อนที่จะตั้งค่าเป็น 0   -  person Stuart Harding    schedule 27.07.2016
comment
คุณช่วยระบุให้เจาะจงมากขึ้นได้ไหมว่าแอนิเมชั่นตัวไหนทำงานไม่ถูกต้อง? GIF ที่ตัดกันระหว่างพฤติกรรมของ Edge กับ Chrome ก็มีประโยชน์เช่นกัน คุณสามารถดาวน์โหลดแอปดีๆ สำหรับเรื่องนี้ได้ที่ screentogif.codeplex.com   -  person Sampson    schedule 27.07.2016
comment
Edge คืออันนี้ และ Chrome คืออันนี้ คุณจะเห็นใน Edge ว่าการเปลี่ยนหีบเพลงเพื่อขยายและยุบนั้นเกิดขึ้นทันที ในขณะที่การเปลี่ยนใน Chrome (และอื่นๆ ทั้งหมดยกเว้น IE) นั้นลื่นไหล นี่เป็นภาพเคลื่อนไหว เท่านั้น ที่ไม่ได้เล่นตามที่คาดไว้ คนอื่นๆ ทั้งหมดทำงานตามที่คาดไว้   -  person Stuart Harding    schedule 28.07.2016

คำตอบ (1)


arrow_upward
0
arrow_downward

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

var box = document.querySelector( ".box" );

// Set the box's initial height to its computed height
box.style.height = window.getComputedStyle( box ).height;

// Hide the box
box.classList.add( "collapsed" );

// Click will toggle a "collapsed" class on the box
document.addEventListener( "click", e => box.classList.toggle( "collapsed" ) )
.box {
  width: 100px;
  overflow: hidden;
  border: 1px solid #000;
  transition: all .2s ease;
}

.collapsed {
  height: 0!important;
}
<ul class="box">
  <li>Hello</li>
  <li>World</li>
</ul>

person Sampson    schedule 28.07.2016
comment
ใช่ ฉันคิดอย่างนั้น ความสูงจะทราบเมื่อโหลดเพจและเก็บไว้ในหน่วยความจำ จากนั้นจะถูกแทรกเข้าไปในแอตทริบิวต์ style เมื่อคลิก var initialHeights = document.getElementsByClassName("level-1"); var values = []; for(var i = 0; initialHeights.length > i; i++){ values.push(initialHeights[i].offsetHeight); } ฉันยังต้องการใช้และลบคลาสที่ขยายออกในเวลาเดียวกันกับที่การยุบถูกลบและเพิ่ม ฉันใช้สลับ () แต่เลือกใช้วิธี element.classList.add() และ element.classList(remove) ที่ละเอียดและแม่นยำยิ่งขึ้น ฉันจะให้วิธีการของคุณยิงแล้วกลับมา - person Stuart Harding; 29.07.2016
comment
ฉันลองแล้วและมันก็ได้ผลจนกระทั่งฉันเพิ่มหีบเพลงย่อยเข้าไปในการต่อสู้ และทุกอย่างพังทลายลงโดยที่ความสูงไม่ได้รับการยกย่อง ดังนั้นฉันจึงกลับไปใช้เวอร์ชันดั้งเดิมที่เติมอาร์เรย์ด้วยความสูงเริ่มต้น ภารกิจของฉันดำเนินต่อไป และฉันจะอัปเดตเสียงระเบิดเมื่อฉันพอใจกับสิ่งที่ฉันมี - person Stuart Harding; 12.08.2016
comment
@StuartHarding โปรดแบ่งปันมาร์กอัปที่คุณต้องการใช้ และฉันยินดีที่จะแก้ไขคำตอบของฉันเพื่อรองรับอย่างสุดความสามารถ - person Sampson; 12.08.2016
comment
ไปที่เสียงนี้ ทุกสิ่งอยู่ในนั้นพร้อมการปรับปรุงเพิ่มเติมบางอย่างที่เกิดขึ้นเนื่องจากสิ่งนี้ทำให้ CSS ที่น่าเกลียดใน IE ไม่ทำงาน - person Stuart Harding; 15.08.2016
comment
ฉันแค่ต้องบอกว่ามันอาจจะอยู่ที่เครื่องของฉันเท่านั้นที่ทำงานไม่ถูกต้อง ฉันมีเครื่อง Windows หนึ่งเครื่องที่ใช้ Win10 และ Mac สี่เครื่องที่มีระบบปฏิบัติการหลากหลาย ดังนั้นหากเครื่องนี้ใช้งานได้ที่อื่น ฉันยินดีที่จะปล่อยให้มันล้มเหลวเนื่องจากแล็ปท็อป Windows ของฉันทำงานล้มเหลว เหตุผลที่ฉันพูดแบบนี้เป็นเพราะเมนูทำงานใน Parallels ย้อนกลับไปถึง IE10 (เห็นได้ชัดว่า IE9 จะล้มเหลวในการสร้างภาพเคลื่อนไหว CSS) แต่นั่นอาจเป็นความบังเอิญ - person Stuart Harding; 15.08.2016
comment
@StuartHarding เสียงพึมพำล่าสุดนี้ดูเหมือนว่าจะทำงานใน Edge โดยไม่มีปัญหาใด ๆ - person Sampson; 15.08.2016
comment
:-/ น่าจะเป็นกรณีไล่หางตัวเองนะครับ ฉันจะทำเครื่องหมายนี้เป็นคำตอบที่ถูกต้องเพราะมันทำให้ฉันคิดว่าความสูงถูกนำมาใช้ในลักษณะที่แตกต่างจากของฉันเล็กน้อยและอาจเป็นประโยชน์กับผู้อื่นด้วย ขอบคุณ @แซมสัน - person Stuart Harding; 16.08.2016