I'm looking for a way to smoothly change the height of the #app element when adding or removing a new item. It seems like it should be simple, but I can't figure it out.
Is there a way to achieve this using pure CSS?
Any help would be appreciated, thank you.
<template>
<div id="app">
<button @click="addItem">Add</button>
<button @click="removeItem">Remove</button>
<div v-for="(item, i) in items" class="box" :key="i">BOX</div>
</div>
</template>
<script>
export default {
name: "App",
data: () => ({
items: [1, 1]
}),
methods: {
addItem() {
this.items.push(1);
},
removeItem() {
this.items.pop();
}
}
};
</script>
<style>
#app {
text-align: center;
color: white;
margin-top: 60px;
background: blue;
height: auto;
transition: all 1.5s ease;
}
.box {
padding: 15px;
}
</style>