Функция слайдов и Internet Explorer 11

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

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

В Edge работает? Большинство пользователей IE сейчас используют Edge, который также заменяет IE. support.microsoft.com/en-us/help/17454/…

— 19.10.2018 13:19

@SimonJensen Да, он работает на краю, но мне нужно заставить его работать в IE 11

— 19.10.2018 13:21

Я не могу протестировать с помощью IE11, но это может быть так же просто, как отсутствие знака% в вставляемом блоке ключевых кадров. Это должно быть либо процентное значение, либо из. Теперь просто ноль.

— 19.10.2018 13:32

@Gerard Я тестировал это прямо сейчас. Это не так, но я добавлю это в свой код на всякий случай.

— 19.10.2018 13:36

Вы уверены, что IE 11 не находится в "режиме совместимости" и, возможно, имитирует IE9 или около того? Попробуйте добавить <meta http-Equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1"> в заголовок документа, чтобы быть уверенным

— 19.10.2018 16:12

@CodeHacker Я пробовал, но все равно не работает

— 19.10.2018 16:21

javascript jquery html css

19.10.2018 13:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

853

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я только что добавил недостающие -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>

Похоже, что я проведу несколько тестов, но большое спасибо, и я подумал, что добавил все префиксы

— 19.10.2018 16:29

@ Zvezdas1989 Также старайтесь всегда ставить префиксы производителя перед обычным тегом. ХАХАХА: Впервые за долгое время я использовал IE для реального Интернета ... но мне пришлось проверить свой ответ ...

— 19.10.2018 16:31

19.10.2018 16:27

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>

Спасибо за это, я обязательно рассмотрю возможность реализации этого.

— 19.10.2018 19:09

19.10.2018 16:46