html - 隐藏 CSS 中的其他元素

Question

我想展示一个文本动画，其中第二个文本从底部移入，第一个文本移出到顶部。这是基本的 HTML 结构:

<span style="position: relative; overflow: hidden; padding-right: 100px;">
    <span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
    <span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>

为简洁起见，省略了动画和布局细节。

更新:这里有一个完整的例子供你玩:http://jsfiddle.net/xpvt214o/577089/

我的主要问题是外部元素不应该可见，但它确实可见。 overflow 属性根本不起作用。我该如何解决这个问题？

外部 span 元素是 inline 因为它在其他文本中流动。只有句子的一部分应该换掉。动画文本必须与句子的其余部分正确对齐。外部元素的 inline-block 不会这样做。

剪裁也必须应用于内部元素的动画(transition: top 0.5s)。

我找到了 CSS 属性 clip 和 clip-path。前者已被弃用(并且它也不起作用)，后者是实验性的，并非在所有必需的浏览器中都受支持(并且在 Firefox 中也失败)。

Answer 1

您必须使用 inline-block 或 block 才能使剪辑工作。问题是:如果你有一个 block 状元素，它只包含绝对定位的子元素或者是空的，它不会有任何维度——你必须手动设置它。尝试:

<span style="display: inline-block; position: relative; overflow: hidden; padding-right: 100px; height: 1.2em; line-height: 1.2em; vertical-align: bottom;">
    <span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
    <span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>