【发布时间】：2013-09-17 10:26:48
【问题描述】：
我有一个具有固定位置和自动宽度（必须具有自动宽度）的元素应该从左侧滑入。
我为它定义了两种状态：隐藏和可见。可见时应位于窗口的左侧，隐藏时应位于视图之外。
可见状态
left: 0;
/* right: auto; */
隐藏状态
right: 100%;
/* left: -element auto width */
当过渡为静态且没有任何动画时，这两种状态都显示正常。
备选方案 1：CSS3 转换
我也尝试过使用 CSS3 转换，它有效，但我担心跨浏览器的差异。当不支持转换时，转换会自动回退到静态更改，但如果我使用 CSS3 转换，则没有直接的回退。必须明确定义。
这是working demo 使用 CSS3 过渡和变换的效果。如您所见，左侧栏的宽度尽可能宽，并且在进入 hidden 状态时滑过左边缘。
备选方案 2：折叠元素宽度
这可以通过操纵元素宽度以某种方式完成（同时也使用最大/最小宽度来支持自动宽度），但这样做的问题是内容不会移动。很明显，元素宽度正在被操纵。 我们必须移动元素，包括它的内容。
问题
有什么办法可以在满足以下规则的同时避免 CSS3 转换：
- 宽度必须自动
- 可见时位于窗口左侧边缘
- 隐藏时，它位于左边缘之外
【问题讨论】：
-
使用javascript在
left:-100%和left:0px;之间切换 -
@Zeaklous：同样的事情可以在没有 Javascript 的情况下完成。但是 -100% 不行 因为这会将元素移动到窗口边缘之外。
-
对不起，但我不得不问：你想滑动元素只使用 CSS，但你不想使用过渡/转换，因为一些旧的浏览器?为什么不使用 JavaScript 后备，为不支持过渡的浏览器设置上述 CSS 属性的动画？或者我可能误解了你的问题。
-
@RobertKoritnik 我的评论基于“隐藏时它位于左边缘之外”
-
@insertusernamehere：我想使用转换，但不是转换。不支持转换的浏览器将回退到非动画状态更改。但是，如果我使用转换，则不会有设计后备。我说得够清楚吗？
标签： css css-transitions