寻找一种更有效的方法来隐藏此溢出并转换文本上的动画

Question

Recently i have been trying to create an animation effect, where i use overflow hidden on a parent span, then tranforming it into view. My current code seems a little bit complicated, and im wondering if theres any other way around it, considering its an effect im going to use a lot throughout the website.

  $(".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

No need to handle separate click. You can use wild card and handle all click on single.

 $('[class^=in]').addClass("error").delay(125).queue(function(next) { var cls = $(this).attr('class'); cls = cls + "-active"; $(this).addClass(cls); }); 

 .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="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 2

Found out a way by using setTimeout instead.

  $('.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>