javascript - 为每个字母制作文本动画的最高效方法是什么

Question

据我所知，“变换”并不是动画效果最好的属性。如果我想实现一个文本分割动画来转换一个块的所有字母 - 例如。用于在滚动条上显示文本 - 最有效的方法是什么？

这是我的方法： https ://codepen.io/markusreis/pen/mdJgzOj

• 将文本拆分为 span

const split = (e) => {
  e = document.querySelector( e );
  e.innerHTML = e.innerText.split('').map( l => `<span data-letter="${l}">${l}</span>`).join('')
}

• 为每个跨度设置动画

.block {
  
  span[data-letter] {
    position: relative;
    overflow: hidden;
    color: transparent;
    display: inline-block;
    &:before {
      color: black;
      content: attr(data-letter);
      position: absolute;
      transform: skewX(-15deg) skewY(15deg) translateY(100%);
      transition: transform .6s cubic-bezier(0.25,0,0.25,1);
    }
    @for $i from 1 through 100 {
      &:nth-of-type(#{$i}) {
        &:before {
          transition-delay: #{$i * 15}ms;
        }
      }
    }
  }

  &:hover {
    span[data-letter] {
      &:before {
        transform: skewX(0) skewY(0) translateY(0);
      }
    }
  }
}

但特别是当有更多或更长的文本块时，动画将不再那么流畅。

关于如何提高效果的任何建议？我的意思是......有些网站轻松实现了很多变换动画，而另一些则非常滞后。所以一定有更好的技术吗？

标签： javascriptcssanimation