CODEWITHSUNDEEP
cssvue.jsvuejs2transition
JD Solanki
JD Solanki

Reputation: 998

How to animate height of transition-group container in Vue

I am trying to add and remove items from list. I am able to animate the list but the container's height is not animating.

CodeSandbox

As you can see in the preview, the red container gets and lose height without transition.

How can I animate the height of the container as well when an item is added or deleted?

Regards

Upvotes: 1

Views: 3252

Answers (2)

Evgeniy
Evgeniy

Reputation: 302

Just add CSS-attribute to your container : transition: .3s where 3s is a value of transition time & change dynamically the height of container.

Upvotes: 1

Ilijanovic
Ilijanovic

Reputation: 14914

<template>
  <div :style="{'max-height': list.length * 24 + 'px'}" class="hgh bg-red-400 container mx-auto">
    <transition-group name="fade-top" tag="ul">
      <li v-for="(item, index) in list" :key="index">
        <p>{{ item }}</p>
      </li>
    </transition-group>
    <button class="mt-4 px-5 py-2 bg-indigo-400 text-white" @click="add">Add</button>
    <button class="mt-4 ml-4 px-5 py-2 bg-indigo-400 text-white" @click="remove">Remove</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      list: [1, 2, 3, 4]
    };
  },
  methods: {
    add() {
      this.list.push(Math.round(Math.random() * 10));
    },
    remove() {
      this.list.pop();
    }
  }
};
</script>
<style>
.fade-top-enter-active,
.fade-top-leave-active {
  transition: opacity 0.3s, transform 0.35s;
}
.fade-top-enter {
  opacity: 0;
  transform: translateY(8%);
}
.hgh {
  height: 100vh;
  transition: max-height 300ms;
}
.fade-top-leave-to {
  opacity: 0;
  transform: translateY(-8%);
}
</style>

Height transitions are usually done with max-height. First you set an big height like 100vh and at your div you calculate the max-height depending on your list length

:style="{'max-height': list.length * 24 + 'px'}"

If you ask where the 24 comes from, its the height of your p element

Also add an css class to your div

.hgh {
  height: 100vh;
  transition: max-height 300ms;
}

Upvotes: 0

Related Questions