htmlcssbootstrap-4vuejs-transition

Apply vuejs transition-group to Bootstrap grid

I am trying to apply vuejs transitions to Bootstrap grids but it totally screw up the grid system because the transition-group modifies the DOM and adds a new tag between the row and col-md-6 tags. 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>

When this is rendered, it is modified to:

<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 new span tag messes up with the grid system, since .col-md-6 is no longer a direct child of the .row.

Anyone knows a workaround for this that still uses Bootstrap grids?

Solution

  • You can directly add a class to the transition-group.

    By default a span is rendered by the transition-group. You change it with the tag attribute and simply add the class="col-md-6" like this:

    <transition-group name="list" tag="div" class="col-md-6"></transition-group>