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

我想要转换一个css属性顺利,然后我想立即更改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)”);)

解决方法

对单个语句中的转换和转换CSS属性进行分组可得出正确的结果,而无需使用100 ms延迟：

$('.marquee-wrapper').css({ transition: "transform 3s linear",transform: "translateY(-" + $(".marquee-content").outerHeight(true) + "px)" });
setInterval(function () {
    $('.marquee-wrapper').css({ transition: "none",transform: "translateY(100px)" });
    $('.marquee-wrapper').css({ transition: "transform 3s linear",transform: "translateY(-" + $(".marquee-content").outerHeight(true) + "px)" });
},3000);

if ($(".marquee").height() < $(".marquee-content").outerHeight(true)) {
    $(".marquee-content").clone().appendTo($(".marquee-wrapper"));
}

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

setInterval(function () {
    $('.marquee-wrapper').css({ transition: "none",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>

该行为的原因可能是同时设置两个CSS属性会触发页面的立即重绘,而单独设置它们不会.

已知某些Javascript命令会导致重绘.获取元素的offsetHeight是最常提到的元素(见this post).事实上,它在this article中被用于解决与这里提出的CSS转换非常相似的问题.如果我们通过在转换之间获取元素高度来测试该方法,我们可以看到结果的行为确实是正确的：

$('.marquee-wrapper').css("transition","none");
$('.marquee-wrapper').css("transform","translateY(100px)");
$('.marquee-wrapper').height(); // Force a repaint
$('.marquee-wrapper').css("transition","translateY(-" + $(".marquee-content").outerHeight(true) + "px)");

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

setInterval(function () {
    $('.marquee-wrapper').css("transition","none");
    $('.marquee-wrapper').css("transform","translateY(100px)");
    $('.marquee-wrapper').height(); // Force a repaint
    $('.marquee-wrapper').css("transition","transform 3s linear");
    $('.marquee-wrapper').css("transform","translateY(-" + $(".marquee-content").outerHeight(true) + "px)");
},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>