幻灯片功能和 Internet Explorer 11

Question

I'm working on slide feature in my project and I've run into problem on IE 11 that I am having real hard time solving. Everything works fine on chrome, mozilla and edge.

One of the first things that I thought was causing issues is lack CSS prefixes, but after adding them code still didn't work in IE. I have also checked IE 11 support for CSS properties I'm using on caniuse website and all properties are supported on IE 11. As far JQ code goes It's pretty straightforward I'm not doing anything special just adding and removing some classes.

Does anyone have idea what might be causing problems and can point me in right direction.

This is my code:

 $('#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>

Also here is JSBin with my code so you can quickly do tests: https://jsbin.com/hufodetexa/edit?html,css,js,output

Answer 1

I just added the missing -ms and one missing transform and it works on my 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 solved your problem very well, so I try to give you a more simple approch to the problem, just so you know: what about use a transition and only one class?

Only a second point of view. Give it a try, if you want, works well also with 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>