所以我有一个信封图像和一个字母图像，我希望字母从信封中平滑过渡 onmouseover 我希望字母平滑过渡回原位 onmouseout。现在第一个鼠标悬停是完美的，信封滑动到 -400px 宽度，以便在 1 秒的过渡时显示字母，但是 onmouseout，信封突然弹回到地方，我不知道为什么。此外，在 mouseout 之后的任何其他鼠标悬停，它都会严厉地捕捉 onmouseover 和 onmouseout 事件。代码如下:
<!doctype html>
<html lang='en-us'>
<head>
<title>Test animation</title>
<style>
.displayNow {
display: flex;
flex-direction: row;
justify-content: flex-end;
position: relative;
}
.letter {
position: absolute;
}
.envelope {
position: absolute;
transition: width 1s ease-in-out;
transition-timing-function: linear;
-webkit-transition: 1s ease-in-out;
-webkit-transition-timing-function: linear;
}
</style>
<script>
function moveOut() {
var cssString = "margin-left:-400px;";
document.getElementById('envelope').style.cssText=cssString;
}
function moveIn() {
var cssString = "margin-left:auto;";
document.getElementById('envelope').style.cssText=cssString;
}
</script>
</head>
<body>
<div class='displayNow'>
<!-- Letter -->
<img src='Letter.png' class='letter' id='letter' onmouseover='moveOut()' onmouseout='moveIn()' alt='letter'>
<!-- Envelope -->
<img src='Envelope.png' class='envelope' id='envelope' onmouseover='moveOut()' onmouseout='moveIn()' alt='envelope'>
</div>
</body>
</html>我还尝试了 :hover 选择器，而不是产生相同结果的 onmouseout/in JavaScript 事件。
最佳答案
与其将 margin-left 设置为 auto，不如将其设置为 0(或它原本应该位于的任何其他位置)
我相信 CSS3 过渡不知道如何处理自动设置。这将适用于任何可以设置为自动的可转换元素。在尝试转换高度和宽度时，我多次遇到这个问题。
至于初始转换后双向捕捉的问题，我不确定这是否与 margin-left:auto 问题有关，但我敢打赌它会修复它
关于javascript - 宽度上的过渡不平滑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45788274/