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.