使用CSS3过渡在固定元素中滑动

Question

我有一个固定位置和自动宽度(必须有自动宽度)的元素应该从左侧滑入.

我为它定义了两种状态:隐藏和可见.当可见时,它应该位于窗口的左侧,当隐藏时它应该在视图之外.

可见状态

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

隐藏的状态

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

当转换是静态的而没有任何动画时,这两种状态都显示正常.

备选方案1:CSS3转换

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

这是使用CSS3过渡和变换的效果的工作演示.如您所见,左侧栏的宽度尽可能宽,当进入隐藏状态时,它会滑过左侧边缘.

备选方案2:折叠元件宽度

这可以通过操纵元素宽度(同时也使用最大/最小宽度来支持自动宽度)来完成,但问题是内容不会移动.显然元素宽度正在被操纵.我们必须移动元素,包括其内容.

题

有没有办法避免CSS3转换同时满足以下规则:

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

Answer 1

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