>我有一个固定位置和自动宽度（必须具有自动宽度）的元素，应该从左侧滑入。
我为它定义了两种状态：隐藏和可见。当可见时，它应该位于窗口的左侧，当隐藏时，它应该就在视野之外。
可见状态
left: 0;
/* right: auto; */
隐藏状态
right: 100%;
/* left: -element auto width */
当过渡是静态的，没有任何动画时，这两种状态都显示正常。
备选方案 1：CSS3 转换
我也尝试过使用 CSS3 转换，它有效，但我担心跨浏览器的差异。当不支持转换时，转换将自动回退到静态更改，但是如果我使用 CSS3 转换，则没有直接回退。它必须明确定义。
这是使用 CSS3 过渡和转换的效果的工作演示。如您所见，左侧栏的宽度尽可能宽，并且在进入隐藏状态时会滑过左边缘。
备选方案 2：折叠元件宽度
这可以通过操纵元素宽度（同时也使用最大/最小宽度来支持自动宽度）来完成，但问题是内容不会移动。很明显，元素宽度正在纵。我们必须移动元素，包括其内容。
问题
有没有办法避免CSS3转换，同时满足以下规则：
- 宽度必须自动
- 当可见时，它位于左侧窗口边缘
- 隐藏时，它位于左边缘的正外侧
你需要将你的元素包装到另一个div 中：
.HTML
<div id="wrapper">
<div id="element">
Lorem ipsum dolor sit.
<br />
Lorem ipsum dolor sit amet.
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae explicabo!
</div>
</div>
#element left: 0%和left: -100%之间的过渡.
现场示例：http://codepen.io/anon/pen/vgzcI