幻灯片功能和互联网浏览器11

Question

我在我的项目中做幻灯片功能，我在IE 11上遇到了问题，我很难解决这个问题。所有的工作在铬，莫兹拉和边缘很好。

我认为引起问题的第一件事之一是缺少CSS前缀，但是在添加它们之后，代码在IE中仍然不起作用。我还检查了IE11对我在犬科网站上使用的CSS属性的支持，并且所有的属性都支持IE11。就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>

​