logo标签列表

IE和Edge浏览器中过渡属性无法正常工作

javascripthtmlcsscss-transitions
3

CSS transition 属性在IE和Edge浏览器中的工作不如预期。 在这里，我已经将转换应用于span元素，在其他浏览器中正常工作，但在IE和Edge中不起作用。 也尝试了-ms-transition属性。 这是我的代码片段。 在IE和Edge中，switch-handle元素的过渡效果无法正常工作。

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>

转换在我的Edge浏览器中成功运行。 - kiranvj
@kiranvj 这在 IE11 浏览器中能正常工作吗？ - Shanmugaraja_K
@Raja IE11也可以工作。 - kiranvj
是的，我也做了同样的事情。但它没有起作用。你有看到内部元素 switch-on 和 switch-off 的过渡是否正常工作吗？但为什么在 switch-handle 中不起作用呢？@kiranvj - Shanmugaraja_K
看起来IE在使用calc和transition的组合时存在一些问题。 - kiranvj
1个回答
1

这在IE11和Edge中都可以工作。

我注意到的唯一问题是在IE中.switch-handle的过渡效果不起作用。这是由于IE使用calc和transition的问题的组合造成的。更改calc()即可解决。

更改

left: calc(100% - 21px);

到

left: 47px;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接