I'm currently attempting to implement vuejs transitions with Bootstrap grids, but it seems to be causing some issues with the grid system. This is because the transition-group feature alters the DOM structure by inserting a new tag between the row and col-md-6 elements. Here's an example:
<div class="row">
<transition-group name="list">
<div class="col-md-6" v-for="product in products" :key="product.id">\
My product content here
</div>
</transition-group>
As a result of this rendering, the code is altered to look like this:
<div class="row">
<span>
<div class="col-md-6" v-for="product in products" :key="product.id">\
My product content here
</div>
</span>
</div>
The introduction of the new span element disrupts the grid system as .col-md-6 is no longer a direct child of .row.
Does anyone have suggestions for a workaround that still utilizes Bootstrap grids?