使用CSS3将元素负“左”位置设置为它的宽度

时间:2012-03-09 12:34:45

标签: html css animation css3

我在div的父overflow:hidden内隐藏了一个内联块元素。然后我使用left属性(负)偏移原始子元素,因此它被隐藏。我可以使用CSS3过渡将它自身显示回父级,但是我必须给这个负偏移量一个相当大的数字(父div的宽度),使得时间取决于有多少文本。我需要它是完美的(由于这里没有解释的原因)。如果left值始终与内联块元素的宽度值匹配,那将是完美的。

有没有办法找到内联块元素的宽度并将该值应用到CSS3中的左偏移量?

我有一种感觉,我将不得不使用jQuery,我只是希望这里有人可能有一个很棒的解决方案。 :)

此处示例: http://jsfiddle.net/RD7Yv/1/

2 个答案:

答案 0 :(得分:0)

尝试left:-100%,这应该有用。

编辑: fiddle

答案 1 :(得分:0)

如果您只是想“使用CSS3过渡”将自己显示回父级,那么似乎根本不更容易移动元素并仅仅为其可见性设置动画。例如,这里是动画的不透明度:

http://jsfiddle.net/jfriend00/BqmQK/

所有,我们使用JS来添加/删除元素中的类,CSS3为我们做了不透明动画。这样,元素可以保留在原始位置,我们不需要进行任何大小或位置计算。

如果它是由悬停触发的话,甚至可以在没有javascript的情况下完成同样的动画。

如果要查看图像滑动到位,则可以将其初始位置设置为:

left: -100%;

并将其设为动画:

left: 0;

您可以在此处查看:http://jsfiddle.net/jfriend00/P2H4Z/