Fade Transition for List Items

Implement a fading transition for list items in a todo app as they are added or removed from the list using Vue's <TransitionGroup> component.

Vue.component('todo-list', {
  template: `
    <div>
      <input v-model="newItem" @keyup.enter="addNewItem" placeholder="Add a todo" />
      <transition-group name="fade" tag="ul">
        <li v-for="(item, index) in items" :key="item.id" @click="removeItem(index)">
          {{ item.text }}
        </li>
      </transition-group>
    </div>
  `,
  data() {
    return {
      newItem: '',
      items: [],
      nextId: 0
    };
  },
  methods: {
    addNewItem() {
      this.items.push({ id: this.nextId++, text: this.newItem });
      this.newItem = '';
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
});

Vue component 'todo-list' with a template that includes an input field for adding new items, and a transition-group for animating list items as they are added and removed.

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

CSS styles for the fade transition. '.fade-enter-active' and '.fade-leave-active' define the transition effect over 1 second, while '.fade-enter' and '.fade-leave-to' set the initial and final opacity states.