JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue-smooth-height"></script>
<div id="app">
    <div class="examples">
        <div class="example">
            <p>Without vue-smooth-height. Ew!</p>
            <div class="container">
                <div v-for="n in children" :key="n"></div>
            </div>
        </div>
        <div class="example">
            <p>With vue-smooth-height. Nice!</p>
            <div class="container" ref="container">
                <div v-for="n in children" :key="n"></div>
            </div>
        </div>
        <div class="example example-2">
            <p>Existing transitions will continue to work.</p>
            <div class="container" :style="background">
                <div v-for="n in children" :key="n"></div>
            </div>
        </div>
        <div class="example example-3">
            <p>The scrollbar can cause problems...</p>
            <div class="container">
                <div v-for="n in children" :key="n"></div>
            </div>
        </div>
        <div class="example example-4">
            <p>...Set "hideOverflow: true" to fix it.</p>
            <div class="container">
                <div v-for="n in children" :key="n"></div>
            </div>
        </div>
        <div class="example example-5">
            <p>Using a custom transition option.</p>
            <div class="container">
                <div v-for="n in children" :key="n"></div>
            </div>
        </div>
        <div class="example example-6">
            <p>Interrupted transitions are handled gracefully.</p>
            <div class="container">
                <div v-for="n in children" :key="n"></div>
            </div>
        </div>
        <div class="example example-7">
            <p>Usage with v-if and &lt;transition&gt;.</p>
            <transition name="fade">
                <div v-if="children == 12" class="container">
                    <div v-for="n in children" :key="n"></div>
                </div>
           ...

CSS

.examples {
     display: flex;
     flex-wrap: wrap;
}
 .example {
     margin-right: 30px;
     margin-bottom: 30px;
     height: 235px;
     width: 250px;
}
 .example > p {
     min-height: 40px;
}
 .container {
     display: flex;
     flex-wrap: wrap;
     background: lightblue;
     overflow: hidden;
     width: 225px;
     will-change: height;
}
 .container div {
     border: 1px solid black;
     margin: 2px;
     width: 50px;
     height: 50px;
}
 .example-2 .container {
     transition: background 1s;
}
 .example-3 .container, .example-4 .container {
     overflow-y: auto;
}
 .fade-enter-active, .fade-leave-active {
     transition: opacity .85s;
}
 .fade-enter, .fade-leave-to {
     opacity: 0;
}

JavaScript

new Vue({
	el:'#app',
	mixins:[SmoothHeight],
	data(){
		return {
			children: 4,
			count: 0,
		}
	},
	computed: {
		background() {
			return {
				background: this.count%2 == 0 ? 'lightblue' : 'pink'
			}
		}
	},
	mounted(){
		let options = [
			{ el: this.$refs.container },
			{ el: '.example-2 .container' },
			{ el: '.example-3 .container' },
			{ el: '.example-4 .container', hideOverflow: true },
			{ el: '.example-5 .container', transition: 'height 1s ease-in-out' },
			{ el: '.example-6 .container', transition: 'height 4s' },
			{ el: '.example-7 .container' },
			{ el: '.example-8 .container' },
		]
		this.$smoothElement(options)
		setInterval(()=>{
			this.children = this.count%2 == 0 ? 12 : 4
			this.count++
		},1250)
	},
})