Vue.js 重复添加相同的 class 以创建 "just updated" 效果

Question

目标：

我有一个项目列表，当其中一个项目发生变化时，我想通过使它具有淡出到透明的黄色背景来引起用户对它的注意。

我是如何尝试这样做的：

我的 Vue 实例有一个 items.

的列表

每个项目都有一个属性、isChanged，这是一个布尔值，表示该项目是否已被界面中的某个操作更改。

我已将 class 绑定到项目，以便当它们的 isChanged 属性为真时，添加 class highlight。

<ul v-for='item in items' :key='item.id'>
    <li :class="{ 'highlight' : item.isChanged>{{ item.name }}</li>
</ul>

突出显示 class 只是将背景更改为黄色，然后将其淡化为透明：

.highlight {
    animation: yellowfadingbox 4s;
}

@keyframes yellowfadingbox {
    from {
        background: @yellow;
    }
    to {
        background: transparent;
    }
}

因此，举个例子，我有一个方法 updateItem 进行 ajax 调用，完成后，将项目 isChanged 属性设置为 true。

updateItem: function (itemKey) {
            axios.get('/item/update', {
                params: {
                    id: id,
                }
            }).then(response => {
                this.item[itemKey].isChanged = true;
            });
        }

之所以有效，是因为它为项目添加了适当的 highlight class，从而达到了我想要的效果。但是，向前看，highlight class 始终存在，因此我无法重新创建效果。

我该如何解决这个问题 approach/is 有更聪明的方法吗？

Answer 1

以下是您可以采用的一种方法。

我使用的是过渡而不是动画。添加 highlight class 将背景设置为黄色。然后我再次删除它以使过渡恢复透明。

我正在使用 requestAnimationFrame 进行延迟，以便转换有机会生效。延迟解决了两个问题。首先，我们需要给 Vue 渲染的机会。其次，我们需要让浏览器有机会应用黄色背景（样式重新计算），否则不会发生过渡。有多种方法可以实现这两件事。 $nextTick 可以用来克服第一个问题，但我们仍然需要一些方法来启动浏览器以应用样式。这变得很麻烦，因为您需要获取对相关元素的引用，然后使用 getComputedStyle 强制在 background-color 上重新计算样式。相比之下，requestAnimationFrame 似乎是一个相对轻松的解决方案。

在此示例中，只需单击项目即可查看效果。

new Vue({
  el: '#app',
  data: {
    items: [{
        name: 'Red',
        id: 1,
        isChanged: false
      },
      {
        name: 'Green',
        id: 2,
        isChanged: false
      },
      {
        name: 'Blue',
        id: 3,
        isChanged: false
      },
      {
        name: 'Yellow',
        id: 4,
        isChanged: false
      }
    ]
  },
  methods: {
    onClick (item) {
      item.isChanged = true;
      
      requestAnimationFrame(() => {
        item.isChanged = false;
      });
    }
  }
});

.list-item {
  transition: background-color 4s;
}

.list-item.highlight {
  background-color: yellow;
  transition: none;
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <ul>
    <li
      v-for="item in items"
      :key="item.id"
      :class="{ 'highlight' : item.isChanged}"
      class="list-item"
      @click="onClick(item)"
    >
      {{ item.name }}
    </li>
  </ul>
</div>

Vue.js 重复添加相同的 class 以创建 "just updated" 效果

Vue.js add the same class repeatedly to create a "just updated" effect

javascript

vue.js