Struggling to implement a transition (animation) on an HTML table, that works fine for a list but not for a table. The transition is functional when using vue 2.
Tweaked my code based on this fiddle.
This represents the HTML:
<div id="app">
<div class="row p-2">
<div class="col-6">
<h2>List</h2>
<transition-group class="list-group" name="fruit-list" tag="ul">
<li class="list-group-item" v-for="item in items" :key="item.id">
<div class="d-flex align-items-center">
<div>
{{ item.name }}
</div>
</div>
</li>
</transition-group>
</div>
<div class="col-6">
<h2>Table</h2>
<table class="table mb-0">
<thead>
<tr>
<th scope="col">Fruit</th>
</tr>
</thead>
<tbody name="fruit-table" is="transition-group">
<tr v-for="item in items" :key="item.id">
<th scope="row">{{ item.name }}</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This demonstrates the CSS:
<style>
.fruit-list-move {
transition: transform 1s;
}
.fruit-table-move {
transition: transform 1s;
}
</style>
Here's the javascript:
<script>
const myapp = {
data() {
return {
items: [
{
id: 1,
name: "Bananas",
quantity: 5
}, {
id: 2,
name: "Apples",
quantity: 3
}, {
id: 4,
name: "Oranges",
quantity: 1
}, {
id: 5,
name: "Stawberries",
quantity: 25
},
]
}
},
mounted() {
this.addItem()
},
methods: {
addItem() {
this.items.splice(2, 0, {
id: 3,
name: "Kiwis",
quantity: 8
})
setTimeout(() => {
this.moveItems()
}, 2000)
},
moveItems() {
this.items = this.items.reverse()
setTimeout(() => {
this.removeItem()
}, 2000)
},
removeItem() {
this.items.splice(2, 1)
setTimeout(() => {
this.addItem()
}, 2000)
}
}
}
app = Vue.createApp(myapp)
app.mount('#app')
</script>
I'm slightly confused about the readiness of Vue 3 as well. The homepage still primarily focuses on Vue 2.