我有一个固定位置和自动宽度(必须有自动宽度)的元素应该从左侧滑入.
我为它定义了两种状态：隐藏和可见.当可见时,它应该位于窗口的左侧,当隐藏时它应该在视图之外.
可见状态
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％.
