<b-table> transitions

Hello, is there a possibility to get vue´s list-transitions working on table rows of the <b-table> component? I tried to work around by using the <b-list-group> component instead combined with the <transition-group> and it “transitions” like a charm, but the big downside of it is that the columns of the grid inside the <list-group-items> don´t get align to each other.

[jimshell]

@ddweber Funny as I was just wondering about it today 😃 I’m not sure if this can be done with transitions, so I tried another approach that seems to work as expected (I have just implemented it a few mins ago with no real testing) =>

considering a transition on a table row for an added item, the “_rowVariant” property can be added to the newly created item (as an objet of course). The documentation mentions a few supported values, but the actual effect is a wrapping <tr> with a “table-[success, danger, etc.]” class.

So, instead of setting "_rowVariant":"success", for instance, I’ve just tried "_rowVariant":"added-row", which procuced a “table-added-row” class on the wrapping <tr>.

From there, I just used the following css to play a bit with this setup and check the behaviour (class names/paths must seem overkill but this is to ensure that the values will override the default ones properly):

.table tr.table-added-row {
	animation-name: addedrow;
	animation-duration: 2s;
}

.table tr.table-added-row td {
	animation-name: addedrowcell;
	animation-duration: 2s;
}

.table tr.table-added-row td > div {
	animation-name: addedrowcelldiv;
	animation-duration: 2s;
}

@keyframes addedrow {
	50%  { background-color: #c3e6cb; }
	75%  { background-color: #c3e6cb; }
}

@keyframes addedrowcell {
	0%   { padding: 0 .75rem; }
	50%  { padding: .75rem; }
}

@keyframes addedrowcelldiv {
	0%   { transform: scale(1, 0); }
	50%  { transform: scale(1, 1); }
}

This works in the latest Chrome (Windows), I have not checked on any other browser/platform yet.

Now, this would not be enough, as this class should be removed from the new item once the animation is over (thanks to an “animationend” event listener).

I hope this helps, please let me know your thoughts on this.

[tmorehouse]

Simplest thing would be to add a custom class to the table (via table-class prop), and in that class target the tbody > tr elements, and add transition: background, and then adjust the _rowVariant to change the row’s color (or use tbody-tr-class prop, using a method, to change the two’s color.