Question

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

当每个item的文本（和后续）宽度发生变化时，我很难实现任何动画。将transition: all 1s linear添加到item没有任何影响。

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

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

initWords = function() {
  words = generateWords(9, 10);
  for (var i = 0; i < words.length; i++) {
    $('.container').append(`
      <div class="item">
        <label>${i + 1}</label>
        <span id="${i}">${words[i]}</span>
      </div>`);
  }
}

refreshWords = function() {
  words = generateWords(9, 10);
  for (var i = 0; i < words.length; i++) {
    $("#"+i).text(words[i]);
  }
}

generateWords = function(num, maxSize) {
  let words = [];
  for (let i = 0; i < num; i++) {
    words.push(Math.random().toString(36).slice(
      Math.floor((Math.random() * maxSize) + 1) * -1));
  }
  return words;
}

initWords();

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 50px;
  width: 500px;
  padding: 10px;
}

.item {
  transition: all 1s linear;
}

.item label,
.item span {
  margin: 0px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<button onclick="refreshWords()">Refresh</button>

Answer 1

有点hackish，但我猜是这样的。

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`;
  }
}

小提琴：https://jsfiddle.net/fyh3fabq/20

在数据刷新时为Flexbox列设置动画

1 个答案: