javascript - 幻灯片功能和 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

标签： javascriptjqueryhtmlcss

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>