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

前端之家收集整理的这篇文章主要介绍了使用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.f2er.com/css/216032.html

猜你在找的CSS相关文章