javascript – 如何毫不拖延地删除css转换？

if ($(".marquee").height() < $(".marquee-content").outerHeight(true)) {
  $(".marquee-content").clone().appendTo($(".marquee-wrapper"));
}
$('.marquee-wrapper').css("transition","transform 3s linear");
$('.marquee-wrapper').css("transform","translateY(-" + $(".marquee-content").outerHeight(true) + "px)");

setInterval(function() {
  
  $('.marquee-wrapper').css("transition","none");
  $('.marquee-wrapper').css("transform","translateY(100px)"); //This should Immediately change translateY to 100px without smooth transition. But this doesn't happen without adding a delay before the below written line
  
  // Its weird why javascript engine executes the below line before executing this line

  $('.marquee-wrapper').css("transition","transform 3s linear");
  $('.marquee-wrapper').css("transform","translateY(-" + $(".marquee-content").outerHeight(true) + "px)");

},3000);

.marquee {
  margin: auto;
  width: 600px;
  height: 200px;
  overflow: auto;
}

.marquee-wrapper {
  transform: translateY(0);
}

.marquee-content {
  margin: 0;
  padding: 30px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="marquee">
  <div class="marquee-wrapper">
    <div class="marquee-content">
      Updates: Update (8 Mar 2016): Now plugin have new option: startVisible The marquee will be visible in the start if set to true. Thanks to @nuke-ellington 👠Update (24 Jan 2014): Note: people who been asking me how to use this plugin with content being
      loaded with Ajax,please read notes about this update. New methods added,so Now after you start the plugin using var $mq = $('.marquee').marquee();,you start the plugin using var $mq = $('.marquee').marquee();,you start the plugin using var $mq
      = $('.marquee').marquee();,then you can pause,resume,togglepause,resume) and desestroy destroy toggle(pause,resume) and destroy toggle(pause,resume) and destroy methods e.g to remove the marquee plugin from your element simply use $mq.marquee('destroy');.
      Similarly you can use pause the marquee any time using $mq.marquee('pause');.
    </div>
  </div>
</section>

正如你可以在setInterval中看到的,我首先将转换为none,然后将其转换为100px.原则上,这应该突然将div转换为100像素,但是在将div移动到100像素的JavaScript引擎执行下一行并重新分配转换之前,这不会发生.在下面的例子中,我给了100ms的延迟,然后重新分配转换,它的工作原理：

if ($(".marquee").height() < $(".marquee-content").outerHeight(true)) {
  $(".marquee-content").clone().appendTo($(".marquee-wrapper"));
}
$('.marquee-wrapper').css("transition","translateY(100px)"); //This  Immedeately change translateY to 100px without smooth transition Now

  setTimeout(function(){
      $('.marquee-wrapper').css("transition","transform 3s linear");
      $('.marquee-wrapper').css("transform","translateY(-" + $(".marquee-content").outerHeight(true) + "px)");
  },100);
},resume) and destroy methods e.g to remove the marquee plugin from your element simply use $mq.marquee('destroy');.
      Similarly you can use pause the marquee any time using $mq.marquee('pause');.
    </div>
  </div>
</section>

我的问题是：

>如何在不改变translate属性之前停止javscript引擎重新分配转换属性？
>为什么javscript引擎在当前行($(‘.marquee-wrapper’)之前的脚本中释放即将出现的行($(‘.marquee-wrapper’).css(“transition”,“transform 3s linear”); .css(“transform”,“translateY(100px)”);)