幻灯片功能和 Internet Explorer 11

Question

我正在我的项目中处理幻灯片功能，我在 IE 11 上遇到了问题，我真的很难解决。 在 chrome、mozilla 和 edge 上一切正常。

我认为导致问题的第一件事是缺少 CSS 前缀，但添加它们后，代码在 IE 中仍然无法正常工作。 我还检查了 IE 11 对我在caniuse网站上使用的 CSS 属性的支持，并且 IE 11 支持所有属性。就 JQ 代码而言，这非常简单，我没有做任何特别的事情，只是添加和删除一些类。

有没有人知道可能导致问题的原因，并可以为我指明正确的方向。

这是我的代码：

 $('#openClose').on('click', function(e) { e.preventDefault(); if ($('.advanced_search').hasClass('dismiss')) { $('.advanced_search').removeClass('dismiss').addClass('selected').show(); } else { $('.advanced_search').removeClass('selected').addClass('dismiss'); } })

 html, body { overflow: hidden; max-width: 100% } .advanced_search { position: absolute; top: 0; right: 0; width: 300px; display: none; height: 100%; overflow: hidden; background: #107b10; z-index: 999; -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transform: translateX(100%); } .selected { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; } .dismiss { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; } @keyframes slide-in { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); } } @-webkit-keyframes slide-in { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide-out { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(100%); } }

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div class="advanced_search dismiss"> <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, quaerat! </span> </div> <a id="openClose">Open/Close</a>

这里还有 JSBin 和我的代码，所以你可以快速进行测试： https ://jsbin.com/hufodetexa/edit?html,css,js,output

Answer 1

我刚刚添加了缺少的 -ms 和一个缺少的转换，它适用于我的 ie 11

 $('#openClose').on('click', function(e) { e.preventDefault(); if ($('.advanced_search').hasClass('dismiss')) { $('.advanced_search').removeClass('dismiss').addClass('selected').show(); } else { $('.advanced_search').removeClass('selected').addClass('dismiss'); } })

 html, body { overflow: hidden; max-width: 100% } .advanced_search { position: absolute; top: 0; right: 0; width: 300px; display: none; height: 100%; overflow: hidden; background: #107b10; z-index: 999; -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); } .selected { -ms-animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; animation: slide-in 0.5s forwards; } .dismiss { -webkit-animation: slide-out 0.5s forwards; -ms-animation: slide-out 0.5s forwards; animation: slide-out 0.5s forwards; } @keyframes slide-in { 0% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -transform: translateX(0%); } } @-webkit-keyframes slide-in { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes slide-out { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateX(0%); } 100% { -webkit-transform: translateX(100%); } }

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div class="advanced_search dismiss"> <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, quaerat! </span> </div> <a id="openClose">Open/Close</a>

Answer 2

CodeHacker 很好地解决了你的问题，所以我试着给你一个更简单的方法来解决这个问题，只是让你知道：使用过渡和只有一个类怎么样？

只有第二种观点。 如果您愿意，可以尝试一下，它也适用于 IE11。 ;-)

 $('#openClose').on('click', function(e) { e.preventDefault(); $('.advanced_search').toggleClass("selected") })

 html, body { overflow: hidden; max-width: 100% } .advanced_search { position: absolute; top: 0; right: 0; transform:translateX(100%); width: 300px; height: 100%; background-color: green; transition: transform 0.5s ease-out; } .selected { transform:translateX(0); }

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div class="advanced_search"> <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, quaerat! </span> </div> <a id="openClose">Open/Close</a>