Только переходите их элементы, где ключ не совпадает nuxtjs / vue

Question

Я хотел бы использовать переход только для элемента, который меняет ключ.Я получаю данные из API, который отслеживает отправления автобусов в режиме реального времени.Я хотел бы сделать уходящий переход для элемента, который больше не существует (часто первый в массиве).Я обновляю весь массив каждый раз, потому что данные во всех элементах в массиве могут изменяться, но я не хочу каждый раз переходить на все элементы.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
        <div class="departures-container">
          <transition-group name="list" tag="div">
          <Departure
            v-for="dep in departures.slice(0,numOfDepartures)"
            v-bind:key="dep.id"
            :departure="dep"
            class="list-item"
          />
          </transition-group>
        </div>
    </template>

<script>
  import axios from 'axios'
  import Departure from '../Stop-places/Departure'

  export default {
    name: 'Departures',
    components: {
      Departure
    },
    props: {
      id: {}
    },
    data() {
      return {
        departures: [],
        numOfDepartures: 5
      }
    },
    mounted() {
      this.fetchDepartures()
      setInterval(() => {
        this.fetchDepartures()
      }, 30000)
    },
    methods: {
      fetchDepartures() {
        const config = {
          headers: {
            Accept: 'application/json'
          }
        }
        axios.get(`/stopplaces/${this.id}/departures`, config).then(response => {
          this.departures = response.data
        })
      }
    }
  }
</script>

<style>
  .list-enter-active,
  .list-leave-active {
    transition: all 2s;
  }
  
  .list-enter,
  .list-leave-to {
    opacity: 0;
  }
</style>

Переход работает нормально, но он распространяется на все элементы.

Answer 1

Может быть, это поможет вам - В css мы можем получить доступ к любому элементу с помощью атрибутов, например, ниже -

input[value=example1] {
  border: 5px solid yellow;
}

<input value="example1">
<input value="example2">

так что вы также можете получить доступ к этому конкретному элементу с помощью атрибута there, я надеюсь, что значение "key" элемента должно отличаться от других. Спасибо