从websocket更新数据时闪烁或闪烁文本

将vuejs与单个文件组件和vuex一起使用。数据正在通过websocket连接流式传输,我正在使用Vuex来管理状态并绑定数据以在各种组件中显示。一切都很好。

我只在组件文件中使用mapState,然后在html中显示该值。

对于某些数据,只要值更改,我都希望应用一些过渡。即 -闪烁/闪烁值 -闪烁/闪烁背景颜色

我正在显示数值,当数字增加时短暂闪烁绿色,而当数字减少时短暂闪烁红色,可能会觉得不错。仍在辩论是否要显示实际文本或包含文本的div。还在短暂的彩色闪烁后是否要将颜色恢复为黑色方面进行辩论。

有没有一种方法可以在vuejs中轻松地做到这一点?我了解如何使用计算值,但是当值从vuex更新时,如何触发一些变色动画。

clOUdland619 回答:从websocket更新数据时闪烁或闪烁文本

根据最终决定的效果,您有多种选择。

这是最简单的解决方案。在watch吸气剂上使用computed er和条件类来设置值的样式。

data: {
  myValue: {
    prev: 150,latest: 100
  }
},computed: {
  valueInStore() {
    return this.$store.getters.value
  }
},watch: {
  valueInStore(newValue,oldValue) {
    this.myValue.prev = oldValue
    this.myValue.latest = newValue
  }
}

然后显示正确的CSS类

<div :class="getColorClass(myValye)">{{ myValue.latest }}</div>

...

methods: {
  // method instead of computed since you were talking about multiple values
  getColorClass(foo) {
    return this.myValue.prev < this.myValue.latest ? 'green' : 'red'
  },}

根据您的需求,您可能需要针对prev == latest情况进行调整。

现在,您可以在.green.red类中使用所需的任何CSS样式或动画。

本文链接:https://www.f2er.com/3169414.html

大家都在问