bootstrap-vue · tmorehouse · Jan 14, 2019 · Jan 13, 2019 · Jan 13, 2019 · Jan 13, 2019
diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
@@ -13,13 +13,10 @@
   z-index: 999999;
 }
 
-
 * {
     -webkit-font-smoothing: antialiased;
 }
 
-
-
 .bd-toc-link, .bd-navbar .navbar-nav .nav-link.active {
   font-weight: normal;
 }
@@ -118,3 +115,8 @@ pre.editable.error:after {
   min-height: 10rem;
   background-color: rgba(255, 0, 0, .1);
 }
+
+/* CSS for table transtion example */
+table#table-transition-example .flip-list-move {
+  transition: transform 1s;
+}
diff --git a/src/components/table/README.md b/src/components/table/README.md
@@ -1334,6 +1334,77 @@ remove the record from the original items array.
 
 **Note:** _Do not bind any value directly to the `value` prop. Use the `v-model` binding._
 
+## Table body transition support
+
+Vue transitions and animations are optionally supported on the `<tbody>` element via the use of Vue's
+`<transition-group>` component internally. Three props are available for transitions support (all three
+default to undefined):
+
+| Prop                        | Type   | Description
+| --------------------------- | ------ | ----------------------------------------------------------------- |
+| `tbody-transition-props`    | Object | Object of transition-group properties                             |
+| `tbody-transition-handlers` | Object | Object of transition-group event handlers                         |
+| `primary-key`               | String | String specifying the field to use as a unique row key (required) |
+
+To enable transitons you need to specify `tbody-transition-props` and/or `tbody-transition-handlers`,
+and must specify which field key to use as a unique key via the `primary-key` prop. Your data **must
+have** a column (specified by the `primary-key` prop) that has a **unique value per row** in order for
+transitions to work properly. The `primary-key` field's _value_ can either be a unique string or number.
+The field specified does not need to appear in the rendered table output, but it **must** exist in each
+row of your items data.
+
+You must also provide CSS to handle your transitions (if using CSS transitions) in your project.
+
+For more information of Vue's list rendering transitions, see the
+[Vue JS official docs](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions).
+
+In the example below, we have used the following custom CSS:
+
+```css
+table#table-transition-example .flip-list-move {
+  transition: transform 1s;
+}
+```
+
+```html
+<template>
+  <b-table id="table-transition-example"
+           :items="items"
+           :fields="fields"
+           striped
+           small
+           primary-key="a"
+           :tbody-transition-props="transProps"
+  />
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      transProps: {
+        // Transition name
+        name: 'flip-list'
+      },
+      items: [
+        {a: 2, b: 'Two', c: 'Moose'},
+        {a: 1, b: 'Three', c: 'Dog'},
+        {a: 3, b: 'Four', c: 'Cat'},
+        {a: 4, b: 'One', c: 'Mouse'}
+      ],
+      fields: [
+        { key: 'a', sortable: true },
+        { key: 'b', sortable: true },
+        { key: 'c', sortable: true }
+      ]
+    }
+  }
+}
+</script>
+
+<!-- table-transitions.vue -->
+```
+
 ## Using Items Provider Functions
 
 As mentioned under the [**Items**](#items-record-data-) prop section, it is possible to use a

diff --git a/src/components/table/table.js b/src/components/table/table.js
@@ -352,6 +352,14 @@ export default {
       // Passthrough prop. Passed to the context object. Not used by b-table directly
       type: String,
       default: ''
+    },
+    tbodyTransitionProps: {
+      type: Object
+      // default: undefined
+    },
+    tbodyTransitionHandlers: {
+      type: Object
+      // default: undefined
     }
   },
   data() {
@@ -1508,10 +1516,29 @@ export default {
       rows.push(h(false))
     }
 
+    // Is tbody transition enabled
+    const isTransGroup = this.tbodyTransitionProps || this.tbodyTransitionHandlers
+    let tbodyProps = {}
+    let tbodyOn = {}
+    if (isTransGroup) {
+      tbodyOn = this.tbodyTransitionHandlers || {}
+      tbodyProps = assign(
+        {},
+        this.tbodyTransitionProps || {},
+        // Always use tbody element as tag. Users can't override this.
+        { tag: 'tbody' }
+      )
+    }
+
     // Assemble the rows into the tbody
     const tbody = h(
-      'tbody',
-      { class: this.bodyClasses, attrs: this.isStacked ? { role: 'rowgroup' } : {} },
+      isTransGroup ? 'transition-group' : 'tbody',
+      {
+        props: tbodyProps,
+        on: tbodyOn,
+        class: this.bodyClasses,
+        attrs: this.isStacked ? { role: 'rowgroup' } : {}
+      },
       rows
     )