Html Question posted in
Some basic documentation can be found here.

Html – How to run an animation in a table cell if the value changes

I’m using vuetify + nuxt to create my web application, how could I apply an animation to a cell if its value changes?

I tried to add a ref to my table element like:
<v-data-table ref="table" :items="data" :headers="headers"/>

and then

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

but nothing happened… anyone can give a light?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Using with vuetify v2:

    mutateMethod (mutations, mu) {
      mutations.forEach((mu) => {
        if (mu.type === 'characterData') {
          let parentNode = mu.target.parentElement
          if (parentNode.tagName === 'SPAN') { parentNode = parentNode.parentElement }
          parentNode.classList.add('is-changed')
          parentNode.addEventListener('animationend', () => {
            parentNode.classList.remove('is-changed')
          })
        }
      })
    },

    Table

    <v-data-table v-mutate="mutateMethod"/>

  2. 0

    More than "value" I believe you’re interested in TD cell "textContent" change.

    The best would be tap in the function that does the content update.
    Otherwise, use MutationObserver on the childList property for every TD of a specific table:

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search