11

我有一个具有固定位置和自动宽度（必须具有自动宽度）的元素，应该从左侧滑入。

我为它定义了两种状态：hidden和visible。可见时应位于窗口的左侧，隐藏时应位于视野之外。

可见状态

left: 0;
/* right: auto; */

隐藏状态

right: 100%;
/* left: -element auto width */

当过渡为静态且没有任何动画时，这两种状态均显示正常。

备选方案 1：CSS3 转换

我也尝试过使用 CSS3 转换，它有效，但我担心跨浏览器的差异。当不支持转换时，转换会自动回退到静态更改，但如果我使用 CSS3 转换，则没有直接的回退。它必须明确定义。

这是一个使用 CSS3 过渡和变换的效果演示。如您所见，左侧栏的宽度尽可能宽，并且在进入隐藏状态时滑过左侧边缘。

备选方案 2：折叠元素宽度

这可以通过操纵元素宽度以某种方式完成（同时也使用最大/最小宽度来支持自动宽度），但这样做的问题是内容不会移动。很明显，元素宽度正在被操纵。我们必须移动元素，包括它的内容。

问题

有什么方法可以避免 CSS3 转换同时满足以下规则：

  • 宽度必须是自动的
  • 当可见时，它位于左窗口边缘
  • 隐藏时，它位于左边缘之外
4

1 回答 1

11

您需要将元素包装到另一个 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

于 2013-09-13T08:09:07.057 回答