宽度过渡不平滑答案

【问题标题】：Transition not smooth on width宽度过渡不平滑
【发布时间】：2017-08-25 04:53:52
【问题描述】：

所以我有一个信封图像和一个字母图像，我希望这封信顺利过渡出信封onmouseover，我希望这封信顺利过渡回原位onmouseout。现在第一个鼠标悬停是完美的，信封滑动到-400px 宽度以便在 1 秒的转换中显示字母，但是onmouseout，信封猛烈地弹回原位，我不知道为什么。此外，鼠标悬停后的任何其他鼠标悬停都会严厉捕捉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 事件。

【问题讨论】：

标签： javascript html css css-transitions

【解决方案1】：

不要将 margin-left 设置为 auto，而是将其设置为 0（或它原本应该位于的任何其他位置）

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

至于初始过渡后双向捕捉的问题，我不确定这是否与 margin-left:auto 问题有关，但我愿意打赌它会解决它

【讨论】：

解决了！！！伙计，我得去查一些关于整个margin:auto 的文章，以及为什么它不适用于过渡！感谢您的提示！
如果我使用自动边距使图像居中怎么办？我怎样才能使我的图像居中并且仍然有平滑的宽度过渡？

【解决方案2】：

对于遇到类似问题（没有看到过渡适用于自动尺寸）的任何人，这里有一篇来自 css-tricks 的精彩文章，介绍了它发生的原因以及您可以采取哪些措施来防止它
Using CSS Transitions on Auto Dimensions

【讨论】：