英文:
Animating CSS scaleY causes glitchy lines around divs
问题
如果您运行以下代码段，当您悬停在 <div> 上时，动画会导致边缘出现小白线。这看起来有点故障。有没有更好的方法在鼠标悬停时对框进行动画处理，而不会导致 <div> 周围出现这些故障线？我以为动画缩放应该是性能高的方式？这个故障在 <div> 越多时变得更糟糕...是某种抗锯齿设置吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Find My Shade</title>
</head>
<body>
<div class="fms-wrapper">
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
<div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
<div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
<div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
</div>
</body>
<style>
.fms-wrapper {
height: 300px;
width: 100%;
display: flex;
margin: 100px 0;
}
.fms-shade {
flex-basis: auto;
flex-grow: 1;
transition: all 0.8s;
transform-origin: 0.5;
transform: scaleY(1);
}
.fms-selected {
flex-grow: 4;
transition: all 0.2s;
transform-origin: 0.5;
transform: scaleY(1.2);
}
</style>
<script>
var hoverColor = 'pink';
document.addEventListener('DOMContentLoaded', fms())
function fms(){
var shadeFinder = document.querySelector('.fms-wrapper')
var shadeDiv = document.querySelectorAll('.fms-shade')
//首次加载正确的颜色到<div>中
shadeDiv.forEach(div => {
div.style.backgroundColor = div.getAttribute("fms-bg")
})
//鼠标事件
shadeFinder.onmouseover = function(event) {
let target = event.target;
target.style.background = hoverColor;
target.classList.add('fms-selected')
};
shadeFinder.onmouseout = function(event) {
let target = event.target;
target.style.background = target.getAttribute("fms-bg");
target.classList.remove('fms-selected')
};
}
</script>
</html>
英文:
If you run the below snippet you see when you hover over the divs the animation causes small white lines to form on the edges. This kinda looks glitchy. Is there a better way to animate the box out on mouseover without causing these glitchy lines around the divs? I thought that animating scale was meant to be performant? This glitch is even worse the more divs there are.. is it some kind of antialias setting?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Find My Shade</title>
</head>
<body>
<div class="fms-wrapper">
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
<div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
<div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
<div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
<div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
</div>
</body>
<style>
.fms-wrapper {
height: 300px;
width: 100%;
display: flex;
margin: 100px 0;
}
.fms-shade {
flex-basis: auto;
flex-grow: 1;
transition: all 0.8s;
transform-origin: 0.5;
transform: scaleY(1);
}
.fms-selected {
flex-grow: 4;
transition: all 0.2s;
transform-origin: 0.5;
transform: scaleY(1.2);
}
</style>
<script>
var hoverColor = 'pink';
document.addEventListener('DOMContentLoaded', fms())
function fms(){
var shadeFinder = document.querySelector('.fms-wrapper')
var shadeDiv = document.querySelectorAll('.fms-shade')
//first load the right colors in to the divs
shadeDiv.forEach(div => {
div.style.backgroundColor = div.getAttribute("fms-bg")
})
//mouse events
shadeFinder.onmouseover = function(event) {
let target = event.target;
target.style.background = hoverColor;
target.classList.add('fms-selected')
};
shadeFinder.onmouseout = function(event) {
let target = event.target;
target.style.background = target.getAttribute("fms-bg");
target.classList.remove('fms-selected')
};
}
</script>
</html>
<!-- end snippet -->
答案1
得分: 3
将您的 .fms-shade 类添加 margin-left:-1px 可以消除间隙。
.fms-shade {
flex-basis: auto;
flex-grow: 1;
transition: all 0.8s;
transform-origin: 0.5;
transform: scaleY(1);
margin-left:-1px;
}
<a href="https://jsfiddle.net/to98gamv/">这是应用此更改的工作代码</a>。
英文:
Adding a margin-left:-1px to your .fms-shade class removes the gap.
.fms-shade {
flex-basis: auto;
flex-grow: 1;
transition: all 0.8s;
transform-origin: 0.5;
transform: scaleY(1);
margin-left:-1px;
}
<a href="https://jsfiddle.net/to98gamv/">Here is the working coding with this change</a>.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论