Мигает или мигает при обновлении данных из веб-сокета

Question

Использование vuejs с отдельными компонентами файла и vuex. Данные передаются через соединение через веб-сокет, и я использую Vuex для управления состоянием и привязки данных для отображения в различных компонентах. Все это прекрасно работает.

Я просто использую mapState в файле компонента, а затем отображаю это значение в HTML.

Для некоторых данных я хотел бы применить какой-либо переход при изменении значения. то есть - мигать / мигать значение - мигать / мигать цвет фона

Я отображаю числовые значения, и может показаться, что было бы неплохо кратковременно мигать зеленым, когда число меняется вверх, и красным, когда число меняется вниз. Все еще спорят, хочу ли я прошить реальный текст или div, содержащий текст. Также спорят, хочу ли я вернуть цвет к черному после краткой цветовой вспышки.

Есть ли способ легко сделать это в vuejs? Я понимаю, как использовать вычисленные значения, но как запустить анимацию изменения цвета при обновлении значения из vuex.

Answer 1

У вас есть несколько вариантов, в зависимости от того, какой эффект вы в конечном итоге определите.

Вот самое простое решение. Используйте watch er на computed геттере и условный класс для стилизации ваших значений.

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.

Теперь вы можете использовать любые стили или анимации CSS, которые вы хотите в классах .green и .red.