Свойство перехода не работает в браузерах IE и Edge - PullRequest
Новая
       5

Свойство перехода не работает в браузерах IE и Edge

0 голосов
/ 25 апреля 2018

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>

1 Ответ

0 голосов
/ 25 апреля 2018

Это работает в IE11 и Edge.

Единственное, что я заметил, в IE .switch-handle переход не работает.Это связано с проблемами IE с комбинацией calc и transition .Измените calc (), и он будет работать

Измените 

left: calc(100% - 21px);

на 

left: 47px;
...