Javascript 在数据刷新时设置flexbox列的动画

我有一个值数组，希望以列的形式显示，每个值最多有2行。我已经能够使用css flex box实现我需要的布局，但是当数据被刷新时，动画会捕捉到新的值，看起来很笨拙。我希望每一列随着宽度的变化滑入/滑出

当每个

项目的文本（以及随后的）宽度发生变化时，我正在努力实现任何动画。将
转换添加到
项中：所有1s线性
没有任何效果

我已经在下面尽可能地简化了这个例子

有可能实现我想要的动画吗？或者我是否需要寻找其他选项，可能需要使用
”


initWords=function（）{
单词=生成单词（9,10）；
for（var i=0；i
.container{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
调整项目：灵活启动；
高度：50px；
宽度：500px；
填充：10px；
}
.项目{
过渡：所有1s线性；
}
.项目标签，
.项目跨度{
利润率：0px 5px；
}

刷新
有点老土，但我猜是这样的

initWords = function() {
  words = generateWords(9, 10);
  for (var i = 0; i < words.length; i++) {
    $('.container').append(
      <div class="item">
        <label class="label-text">${i + 1}</label>
        <span class="item-text" id="${i}">${words[i]}</span>
      </div>);
  }
}

refreshWords = function() {
  words = generateWords(9, 10);
  toggle = !toggle;
  var d = document.querySelectorAll('.item');
  var m = document.querySelectorAll('.label-text');
  var k = document.querySelectorAll('.item-text');

  for (var i = 0; i < words.length; i++) {
    $("#" + i).text(words[i]);
    var width = m[i].clientWidth + k[i].clientWidth + 25;
    d[i].style.width = `${width}px`;
  }
}

initWords=function（）{
单词=生成单词（9,10）；
for（var i=0；i

小提琴：
你想达到什么效果，设置宽度的动画？是的，宽度。我正在寻找它滑入/滑出我想你可以用jquery检查每个项目的宽度，css无法设置自动值的动画。谢谢。我同意，这是有点黑客，我希望一个干净的css解决方案。但我还是会给你一票