文本滚动按钮悬停效果

Question

我正在处理一个按钮悬停效果，当你悬停时，每个字符都会翻转。这个效果几乎完美，但不知何故它去掉了单词之间的空格，所以按钮现在显示为'Thisisatext'而不是'This is a text'。我尝试了很多方法，但似乎找不到正确的解决方案：

演示：

https://codepen.io/pixelarchitect/pen/mdQXjgx

SCSS：

.btn-text {
transform: translateY(var(--y)) translateZ(0);
transition: transform 0.3s ease;

  div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 1rem 0 white;

    span {
    display: block;
    backface-visibility: hidden;
    transition: transform 0.25s ease;
    transform: translateY(var(--m)) translateZ(0);

      @for $i from 1 through 12 {
        &:nth-child(#{$i}) {
          transition-delay: $i * 0.05s;
        }
      }
    }
  }

  &:hover {
    span {
      --m: calc(1rem * -1);
    }
  }

}

JS：

document.querySelectorAll('.btn-text').forEach(button => {
const words = button.textContent.trim().split(' ');
button.innerHTML = '<div>' + words.map(word => '<span>' + word.split('').join('</span><span>') + '</span>').join(' ') + '</div>';
});

- Erwin van Ekeren

Answer 1

你将句子拆成单个单词，然后将它们放回并用包裹起来；这样做时，你会丢失空格，因为是一个内联容器。

这就是你得到的结果：

<button class="btn btn-primary btn-text"><div><span>This</span><span>is</span><span>a</span><span>text</span></div></button>

在HTML代码中，当你把单词放在一起时，请添加一个空格。 

document.querySelectorAll('.btn-text').forEach(button => {
  const words = button.textContent.trim().split(' ');
  button.innerHTML = '<div>' + words.map(word => '<span>' + word.split('').join('</span><span>') + '</span>').join('&nbsp;') + '</div>';
});

- luenib

---

谢谢您的反馈，问题是现在它按照单词而不是字符进行动画。 - Erwin van Ekeren

谢谢您的反馈，问题是它现在按词而不是按字符进行动画了。 - Erwin van Ekeren

感谢您的反馈，问题是现在它按照单词而不是字符进行动画。 - undefined

@ErwinvanEkeren 这里多了一个空格，现在已修复。 - Arkellys

@ErwinvanEkeren 之前有一个多余的空格，现在已经修复了。 - Arkellys

@ErwinvanEkeren 之前有一个多余的空格，现在已经修复了。 - undefined

Answer 2

将 <span /> 的样式添加为 white-space: pre。

...
span {
      white-space: pre;
      ...

在JS中保留空格：

document.querySelectorAll(".btn-text").forEach((button) => {
  const words = button.textContent.trim().split("");
  button.innerHTML =
    "<div>" + words.map((word) => `<span>${word}</span>`).join("") + "</div>";
});

工作演示（codepen）

- Asplund