时间戳

首页 > 解决方案 > CSS填充动画在空白处中断

html - CSS填充动画在空白处中断

问题描述

我正在尝试使用我在 codepen 上找到的内容

它工作得很好，除非你在两者之间放置一个空格。然后它做了一个奇怪的跳跃动画。

https://codepen.io/sumanengbd/pen/gRjEYM

<h1 class="effect-1" data-text="Text Stuff">Text Stuff</h1>

h1.effect-1 {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);

  &:before {
    top: 0;
    left: 0;
    width: 0;
    color: #262626;
    overflow: hidden;
    position: absolute;
    content: attr(data-text);
    transition: all 0.9s;
  }

  &:hover {

    &:before {
      width: 100%;
    }
  }
}

标签： htmlcss

解决方案

当您限制 的宽度时::before，它更喜欢将其文本换行，因此第二个单词最终隐藏在第二行而不是向右截断。可以禁用换行，当原始文本不应该换行时，这可以作为修复：

&:before {
   …
   white-space: nowrap;
}

推荐阅读