Question

CSS transition属性在IE和Edge浏览器中无法正常工作。这里我已经应用了span元素的转换，它在除IE和Edge之外的其他浏览器中正常工作。还尝试了-ms-transition属性。这是我的代码片段。 switch-handle元素转换在IE和Edge中无效。

function handlers() {
  var warpper = document.getElementsByClassName("switch-wrapper"),
    child = warpper[0].children;
  if (!child[1].classList.contains('active')) {
    child[0].checked = true;
    child[1].classList.add('active');
    child[2].classList.add('active');
  } else {
    child[0].checked = false;
    child[1].classList.remove('active');
    child[2].classList.remove('active');
  }
}

input[type=checkbox] {
  width: 1px;
  height: 1px;
  opacity: 0;
  position: absolute;
}


/*------------Wrapper CSS---------------*/

.switch-wrapper {
  position: relative;
  width: 70px;
  cursor: pointer;
  height: 22px;
}


/*------------Inner CSS---------------*/

.switch-inner {
  height: 22px;
  position: absolute;
  transition: 0.6s;
  border: 1px solid;
  width: 70px;
  overflow: hidden;
  box-sizing: border-box;
}


/*------------ SwitchBar CSS---------------*/

.switch-on,
.switch-off {
  position: absolute;
  height: 20px;
  width: 100%;
  user-select: none;
  transition: 0.6s;
  line-height: 21px;
}

.switch-on {
  left: -100%;
  text-indent: 14px;
}

.switch-off {
  text-indent: 30px;
  left: 0;
}


/*------------ Handle CSS---------------*/

.switch-handle {
  position: absolute;
  height: 14px;
  width: 14px;
  margin: 3px;
  background-color: #1b191e;
  top: 1px;
  left: 1px;
  transition: 0.6s;
}


/*------------ Active CSS---------------*/

.switch-inner.active .switch-on {
  background-color: aquamarine;
  left: 0;
}

.switch-inner.active .switch-off {
  left: 100%;
  transition: 0.6s;
}

.switch-handle.active {
  left: calc(100% - 21px);
  transition: 0.6s;
}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
</head>

<body>
  <h2>Switch</h2>
  <div class="switch-wrapper">
    <input type="checkbox" id="checked" />
    <span class="switch-inner" onclick="handlers()">
            <span class="switch-on">On</span>
    <span class="switch-off">Off</span>
    </span>
    <span class="switch-handle" onclick="handlers()"></span>
  </div>
</body>

</html>

Answer 1

这适用于IE11和Edge。

我注意到只有在IE .switch-handle转换中才有效。这是由于IE issues with calc and transition组合。改变calc（），它将起作用

更改

left: calc(100% - 21px);

到

left: 47px;

Transition属性不在IE和Edge浏览器中工作

1 个答案: