GreenSock JS在Tween onComplete（）中添加dom元素

我正在努力克服一个GreenSock JS问题，你也许可以帮我解决

在容器div宽度增加两倍之后，我尝试使用onComplete（）事件将一个内联div附加到新创建的容器空间中

新的div不会立即添加到空间中。在下一个添加操作（创建额外的容器宽度）中，将显示先前创建的div

我试图在格林斯托克的背景下解决这个问题，但是所有的想法都是受欢迎的

谢谢

TweenLite.to($('.list-item-container'), 1, {
  width: $('.list-item-container').width() + 253,
  delay: 0.25,
  onComplete: function () {
     var _item = document.createElement('div');
     $(_item).addClass('list-item');
     $('.list-item-container').append(_item);
  }
});

---

在jQuery准备就绪之前，这两个过程似乎已经完成了

$(function() {
    TweenLite.to($('.list-item-container'), 1, {
      width: $('.list-item-container').width() + 253,
      delay: 0.25,
      onComplete: function () {
       var _item = $("<div/>");
       $(_item).addClass('list-item');
       $('.list-item-container').append(_item);
      }
   });
});

$（函数（）{
TweenLite.to（$（'.list item container'），1{
宽度：$（'.list item container'）。宽度（）+253，
延迟：0.25，
onComplete:函数（）{
变量_项=$（“”）；
$（_item）.addClass（'list-item'）；
$（'.list item container'）。追加（_item）；
}
});
});

当我把它放在一个触发事件中时，它也会起作用

$("#button").on('click', function(){
    TweenLite.to($('.list-item-container'), 1, {
      width: $('.list-item-container').width() + 253,
      delay: 0.25,
      onComplete: function () {
       var _item = $("<div/>");
       $(_item).addClass('list-item');
       $('.list-item-container').append(_item);
      }
   });
});

$（“#按钮”）。在（'click'，function（）上{
TweenLite.to（$（'.list item container'），1{
宽度：$（'.list item container'）。宽度（）+253，
延迟：0.25，
onComplete:函数（）{
变量_项=$（“”）；
$（_item）.addClass（'list-item'）；
$（'.list item container'）。追加（_item）；
}
});
});

我创建了一个JSBin来演示它

您可能想考虑使用ID来标识列表项容器，因为

$（'.list item container'）。追加（_item）

将使用
列表项容器
类将
\u项
附加到每个元素

祝你好运