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>
IE11
浏览器中能正常工作吗? - Shanmugaraja_Kswitch-on
和switch-off
的过渡是否正常工作吗?但为什么在switch-handle
中不起作用呢?@kiranvj - Shanmugaraja_K