vuetable-2
vuetable-2 copied to clipboard
Detail row transition not working
I am trying to use vue2-animate
CSS library (http://about.asika.tw/vue2-animate/) with vue-table2 to apply transitions to details row but it's not working.
Here is my setup:
<vuetable
ref="vuetable"
detail-row-component="user-detail-row"
detail-row-transition="fadeDown">
</vuetable>
Transition is not applied...
@PrimozRome I may not be able to help you that much on this topic. What I did was just wrapping the transition around the detail row. The string you passed in the detail-row-transition
just got passed down to the transition
component.
@ratiw yes I saw that string is paased down into <transition :name="detail-row-transition">
but unfortunately it's not working. Did you ever try it if it's working?
@ratiw okay I have found and solved the problem. You are wrapping <transition>
around the table cell tag <td>
instead of table row <tr>
.
I have updated to this and it works...
<template v-if="useDetailRow">
<transition :name="detailRowTransition">
<tr v-if="isVisibleDetailRow(item[trackBy])"
@click="onDetailRowClick(item, $event)"
:class="[css.detailRowClass]">
<td :colspan="countVisibleFields">
<component :is="detailRowComponent" :row-data="item" :row-index="index"></component>
</td>
</tr>
</transition>
</template>
@PrimozRome I haven't actually used it myself. Can you help sending PR for this based on develop
branch?
@ratiw Pull request created https://github.com/ratiw/vuetable-2/pull/258
@PrimozRome Thanks, really appreciated. :)
When is this going to be released on the master branch?
@ratiw Just want to remind, please approve this PR bugfix, thank you
FYI, it looks like this was actually fixed already. This issue could be closed.