Функция слайдов и интернет-проводник 11

Question

Я работаю над функцией слайдов в своем проекте, и у меня возникла проблема с IE 11, которую мне очень трудно решить.Все отлично работает на Chrome, Mozilla и Edge.

Одной из первых причин, по которой я думал, были проблемы, это отсутствие префиксов CSS, но после их добавления код все еще не работал в IE.Я также проверил поддержку IE 11 для свойств CSS, которые я использую на веб-сайте caniuse , и все свойства поддерживаются в 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

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>

Answer 2

Я только что добавил отсутствующие -ms и одно отсутствующее преобразование, и оно работает на моем, т.е. 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>