如果值发生变化，如何在表格单元格中运行动画

Question

我正在使用 vuetify + nuxt 创建我的 Web 应用程序，如果单元格的值发生变化，如何将动画应用到单元格？

我尝试向我的表元素添加引用，例如：
<v-data-table ref="table" :items="data" :headers="headers"/>

进而

$this.$refs.table.$el.addEventListener('change', func)

但什么也没发生...任何人都可以点亮吗？

Answer 1

不仅仅是“价值”，我相信您对 TD 单元“文本内容”的更改感兴趣。

最好的办法是点击进行内容更新的功能。
否则， 对特定表的每个 TD 的属性使用MutationObserver ：childList

const contentsObserver = new MutationObserver((mutations) => {
  mutations.forEach(mu => {
    if (mu.type === "childList") {
      mu.target.classList.add("is-changed");
      mu.target.addEventListener("animationend", () => {
        mu.target.classList.remove("is-changed");
      }, {once: true});
    }
  });
});

const elsTD = document.querySelectorAll("tbody td");
elsTD.forEach(elTD => contentsObserver.observe(elTD, {childList: true}));


// Demo: dynamic textContent change
const rand = (min, max) => Math.random() * (max - min) + min;
const changeText = () => {
  const index = ~~rand(0, elsTD.length);
  const elTDActive = elsTD[index];
  elTDActive.textContent = rand(1, 99).toFixed(2);
  setTimeout(changeText, rand(300, 1300));
}
changeText();

td, th {
  padding: 0.5rem 1rem;
  font: 1rem/1.5 monospace;
}

.is-changed {
  animation: blink 1s;
}

@keyframes blink {
  0% {
    background: fuchsia;
  }
}

<table>
  <thead>
    <tr>
      <th></th>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Baz</th>
      <td>23.00</td>
      <td>56.45</td>
    </tr>
    <tr>
      <th>Daz</th>
      <td>34.46</td>
      <td>89,20</td>
    </tr>
  </tbody>
</table>