我正在学习 CSS 过渡,我正在尝试使 3 条偏移线将宽度减小到各自的中心点。现在,宽度过渡发生在左侧而不是中心。
这是 Fiddle .
如何将每条线的宽度过渡到各自的中心点?
代码:
const div = document.getElementById('lines')
div.addEventListener('click', function() {
var className = div.getAttribute("class");
if (className != 'open') {
div.className = 'open';
} else {
div.className = '';
}
})
#lines {
width: 250px;
height: 250px;
position: absolute;
cursor: pointer;
transition: .25s ease-in-out;
}
#lines span {
border: 1px solid black;
display: block;
position: absolute;
height: 15px;
width: 200px;
background: #d3531a;
border-radius: 9px;
transition: width .25s ease-in-out;
}
#lines span:nth-child(1) {
top: 0px;
}
#lines span:nth-child(2) {
top: 18px;
left: 18px;
}
#lines span:nth-child(3) {
top: 36px;
left: 36px;
}
#lines.open span {
width: 16px;
}
<div id="lines">
<span></span>
<span></span>
<span></span>
</div>
最佳答案
使用 transform: scale()
而不是 width
并且 transform-origin
将默认为中心。
const div = document.getElementById('lines')
div.addEventListener('click', function() {
var className = div.getAttribute("class");
if (className != 'open') {
div.className = 'open';
} else {
div.className = '';
}
})
#lines {
width: 250px;
height: 250px;
position: absolute;
cursor: pointer;
transition: .25s ease-in-out;
}
#lines span {
border: 1px solid black;
display: block;
position: absolute;
height: 15px;
width: 200px;
background: #d3531a;
border-radius: 9px;
transition: transform .25s ease-in-out;
}
#lines span:nth-child(1) {
top: 0px;
}
#lines span:nth-child(2) {
top: 18px;
left: 18px;
}
#lines span:nth-child(3) {
top: 36px;
left: 36px;
}
#lines.open span {
transform: scaleX(0);
}
<div id="lines">
<span></span>
<span></span>
<span></span>
</div>
关于html - 线到中心的 CSS 过渡宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43669337/