时间戳

首页 > 解决方案 > .append() 之后的 JQuery .addClass() 未按预期运行

jquery - .append() 之后的 JQuery .addClass() 未按预期运行

问题描述

HTML

<ul class="container" >
   <li class="default-state"> 
      some stuff 
   </li>
</ul>

SASS

.default-state
  transition: all 0.2s ease 0s
  width: 20px

.new-state
  width: 100px

JS

$itemClone = $('li.default-state').clone();
$('ul').append($itemClone);
$itemClone.addClass('new-state');

发生的情况是 div 出现在列表中，其类已经为“.new-state”，并且没有应用任何转换。

当我这样做时，我觉得很荒谬：

$itemClone = $('li.default-state').clone();
$('ul.container').append($itemClone);
setTimeout(function(){
   $itemClone.addClass('new-state');
}, 1);

它完美地工作。但我觉得在这种情况下应该不需要使用 .delay() 或 setTimeout 。我知道。append()没有回调函数，是否有另一种 jquery 方法可以添加到此以避免添加愚蠢的 1ms 延迟？

我想将我所有的过渡/动画保留在 SASS 中，因为宽度在媒体查询中是动态的。

标签： jqueryappendcss-transitions

解决方案

推荐阅读