javascript - 寻找一种更有效的方法来创建隐藏的溢出并在文本上翻译动画

Question

最近我一直在尝试创建一个动画效果，我在其中使用隐藏在父跨度上的溢出，然后将其转换为 View 。我当前的代码似乎有点复杂，我想知道是否有任何其他解决方法，考虑到我将在整个网站中大量使用它的效果。

    $(".in1").addClass("error").delay(125).queue(function(next){
        $(this).addClass('in1-active');
    });
    $(".in2").addClass("error").delay(250).queue(function(next){
        $(this).addClass('in2-active');
    });
    $(".in3").addClass("error").delay(375).queue(function(next){
        $(this).addClass('in3-active');
    });

.inwrap {
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.in1, .in2, .in3{
    display: block;
    transition: transform 1s cubic-bezier(0,1,.82,1);
    transform: translateY(101%);
}
.in1-active, .in2-active , .in3-active  {
    display: block;
    transform: translateY(0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="introduction">
  <h2>
    <span class="inwrap"><span class="in1"><a href="#about-me">Graphic designer</a> that </span></span>
    <span class="inwrap"><span class="in2">specializes in <a href="#days-of-ux">interactive</a></span></span>
    <span class="inwrap"><span class="in3"> design and <a href="#struggle-magazine">print</a></span></span>
  </h2>
</div>

Answer 1

找到了使用 setTimeout 代替的方法。

    $('.in').each(function(i){
        var row = $(this);
      setTimeout(function() {
              row.addClass('in-active');
          }, 150*i);

    });

.inwrap {
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.in {
    display: block;
    transition: transform 1s cubic-bezier(0,1,.82,1);
    transform: translateY(101%);
}
.in-active{
    display: block;
    transform: translateY(0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="introduction">
  <h2>
    <span class="inwrap"><span class="in"><a href="#about-me">Graphic designer</a> that </span></span>
    <span class="inwrap"><span class="in">specializes in <a href="#days-of-ux">interactive</a></span></span>
    <span class="inwrap"><span class="in"> design and <a href="#struggle-magazine">print</a></span></span>
  </h2>
</div>