www.qgates.com

Page: https://www.qgates.com/articles/blog/table-row-transitions-with-vuejs-and-velocityjs

HTML table row transitions with Vue.js and Velocity.js

Posted by Seb T in blog on

Vue.js and Velocity.js

CSS and JS transitions/animations are great for adding subtle (or less so) transition effects to elements in the DOM. But one use-case that requires special attention is tables. In a recent commercial application we needed interactive tables with fine-grained control of the appearance of table rows and cells. In this aticle we provide a simple demo using Vue.js and Velocity/js that shows a simple slideUp/slideDown to highlight row insertion/removal visually. The method illustrated is easily expanded with a sequence of animations and can be used to control complex table layouts with compound row, column or cell animations.

For slides, the usual approach involves overflow:hidden together with manipulation of an element's height property over time. A typical approach (eg. with jQuery) would involve some JS to perform a slideUp/slideDown, or using CSS transitions we could apply some CSS classes together with the transition property. But tables present an edge-case: the browser determines the height of tr and contained td elements by content and refuses any attempts to override the height of these elements, either with CSS or inline styles.

Our approach is to ensure that our table cell content is wrapped in a div, set overflow: hidden on them, remove any padding on the cells and apply it to the divs instead. We can then animate both the max-height and the padding of the divs and our table rows will automatically expand or contract.

A secondary problem arises from the way transitions are leveraged within Vue.js through the included transition or transition-group components. Typically in Vue, where repeating data are concerned, the approach is to render a dataset held in an array as table rows using v-for in the template, then use a transition-group to define the transition for each element in the list as it appears or disappears. This won't work for table rows, as we'll need to perform transitions on child elements of the table to collapse or expand our rows; we'll leverage some Vue hooks on the transition-group so we can fire our Velocity transitions on child elements when the row is about to appear or disappear.

We assume for our example that some table rows will be initially displayed, and that all rows/cells will have the same height. In so doing, we can read the table cell and padding values from the table and use them for transitions, avoiding the need for hardcoding these values into our Velocity calls.

Lastly achieving the same using pure CSS is possible but not desirable here: it's more work, less semantic and offers us less overall control. We've used Velocity.js to provide the effects themselves, which offers comparable performance to CSS transitions but with greater control of animation specifics. jQuery would work here (though not recommended for animation), as would GreenSock or your own JS.

(See also "Transition-group is not working on tables", Vue Github issue

As a creative photographer, I wanted a responsive website with a unique style to showcase and sell my work. Seb delivered a beautiful site that also works brilliantly on phones and tablets.

Pam West, H-Pinkness Photography, Brighton, UK

We specialise in wealth management for Doctors and Dentists. Queensgate Studios built a site to showcase us and allow our advisers to regularly inform clients about financial matters which matter to them.

Laurence Newman, Legal and Medical Investments Ltd., UK

We needed Android support for Flexicall, a system designed around legacy Windows Mobile 6 devices. Queensgate Studios delivered on time and on budget.

Cuda Drinks Co., Plymouth, UK

We design documentation systems for emergency, first response and global industries. Queensgate Studios built our online presence, ordering system and EDIS, our first electronic system.

Carl Wallin, CWC Services, UK