Question

所以我有一个信封图片和一个字母图片，我希望这封信能够顺利过渡到信封onmouseover之内，我希望这封信能顺利过渡到onmouseout。现在第一个鼠标悬停是完美的，信封滑动到-400px宽度，以便在1秒过渡时显示字母，但onmouseout，信封严重地回到原位，我不知道为什么。此外，鼠标输出后的任何其他鼠标悬停都会严重影响onmouseover和onmouseout事件。这是代码：

＆＃13;

<!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>

＆＃13;

我还尝试了一个:hover选择器，而不是onmouseout / in JavaScript事件，它产生了相同的结果。

Answer 1

不是将margin-left设置为auto，而是将其设置为0（或者它原本应该放在的任何地方）

我相信CSS3过渡不知道如何处理自动设置。这将适用于任何可以设置为auto的可转换元素。在尝试过渡高度和宽度时，我多次遇到过这个问题。

就初步过渡后双向捕捉的问题而言，我不确定这是否与margin-left:auto问题有关，但我愿意打赌它会修复它

Answer 2

对于那些提出类似问题的人（没有看到转换与自动维度一起工作），这里有一篇很棒的文章来自css-tricks，说明它为什么会发生以及你可以采取哪些措施来防止它{{{ 3}}

过渡在宽度上不平滑

2 个答案: