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

您必须使用内联代码块或代码块才能使剪辑工作。问题是：如果您的块状元素仅包含绝对定位的子元素或为空，则它将没有任何尺寸-您必须手动设置。试试：

<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>

Answer 2

我不确定为什么要为此使用内联CSS和SPAN，但是我想我已经找到了答案。请检查我的解决方案，如果您不清楚的话，请让我解决。

您可以仅使用一个元素，使用伪元素，而不执行其他操作。 SPAN是一个内联元素，因此您可以为其分配inline-block。

关于， AB

.hover-text {
  display: inline-block;
  background-color: grey;
  color: transparent;
  color: white;
  padding: 10px 25px;
  position: relative;
  overflow: hidden;
}
.hover-text:before {
  content: 'Text 1';
  padding: inherit;
  position: absolute;
  left: 0;
  top: 0%;
  background-color: inherit;
  transition: 0.2s ease all;
}
.hover-text:after {
  content: 'Text 2';
  padding: inherit;
  position: absolute;
  left: 0;
  bottom: -100%;
  background-color: red;
  transition: 0.2s ease all;
}
.hover-text:hover:before {
  top: -100%;
}
.hover-text:hover:after {
  bottom: 0%;
}

<span class="hover-text">Text 1</span>

在CSS中隐藏其他元素

2 个答案: