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

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

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

可见状态

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

隐藏的状态

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

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

备选方案1：CSS3转换

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

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

备选方案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

原文地址：https://www.jb51.cc/css/216032.html