Vue transition slide down for each item

Question

I'm learning how transitions work with vue. I have a price estimation, when each tab is clicked it will bring up an estimated price per item. I want when the item appears, there is a slide down effect. I tried to find out how, and I got the way by Enter / Leave & List Transitions. And I tried to make it, but the effect still doesn't work. Can anyone help me with this problem?

My Full Code in Codesandbox => https://codesandbox.io/s/suspicious-almeida-rjyy9

PriceEstimation.vue

<template>
  <div class="card">
    <div class="card-header">Price Estimation</div>
    <div class="card-body px-0 pt-0">
      <transition name="slide">
        <div class="estimation-category" v-if="cart.total || isDropped">
          <div v-if="cart.storage && cart.storage.totalCost">
            <div class="bg-secondary d-flex justify-content-between p-2">
              <h5 class="text-white m-0">Storage</h5>
              <div>
                <span class="fas fa-pen text-success mr-2" @click="setTab('storage-calculator')"></span>
                <span class="fas fa-trash-alt text-danger" @click="deleteStorage()"></span>
              </div>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Server Name</span>
                <span class="ml-2">{{ cart.storage.serverName }}</span>
              </div>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Specification</span>
                <span class="ml-2">{{ cart.storage.specification.name }}</span>
              </div>
              <span>${{ cart.storage.specification.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Components</span>
              </div>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">vCPU</span>
                <span class="ml-2">{{ cart.storage.cpu.qty }} GHz</span>
              </div>
              <span>${{ cart.storage.cpu.value * cart.storage.cpu.qty }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">vRAM</span>
                <span class="ml-2">{{ cart.storage.ram.qty }} Gb</span>
              </div>
              <span>${{ cart.storage.ram.value * cart.storage.ram.qty }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Capacity</span>
                <span class="ml-2">{{ cart.storage.capacity.qty }}</span>
              </div>
              <span>${{ cart.storage.capacity.value * cart.storage.capacity.qty }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Server Qty</span>
                <span class="ml-2">{{ cart.storage.server.qty }}</span>
              </div>
              <span>${{ cart.storage.server.value * cart.storage.server.qty }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Storage Type</span>
                <span class="ml-2">{{ cart.storage.storageType.name }}</span>
              </div>
              <span>${{ cart.storage.storageType.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">OS</span>
                <span class="ml-2">{{ cart.storage.os.name }}</span>
              </div>
              <span>${{ cart.storage.os.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Database</span>
                <span class="ml-2">{{ cart.storage.database.name }}</span>
              </div>
              <span>${{ cart.storage.database.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Firewall</span>
                <span class="ml-2">{{ cart.storage.firewall.name }}</span>
              </div>
              <span>${{ cart.storage.firewall.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Estimate Cost</span>
              </div>
              <span>${{ cart.storage.totalCost }}</span>
            </div>
          </div>
          <div v-if="cart.service && cart.service.totalCost">
            <div class="bg-secondary d-flex justify-content-between p-2">
              <h5 class="text-white m-0">Service</h5>
              <div>
                <span class="fas fa-pen text-success mr-2" @click="setTab('service-calculator')"></span>
                <span class="fas fa-trash-alt text-danger" @click="deleteService"></span>
              </div>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Sub-service</span>
                <span class="ml-2">{{ cart.service.service.name }}</span>
              </div>
              <span>${{ cart.service.service.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Package-type</span>
                <span class="ml-2">{{ cart.service.package.name }}</span>
              </div>
              <span >${{ cart.service.package.value }}</span>
            </div>
            <div class="d-flex justify-content-between px-2">
              <div>
                <span class="font-weight-bold">Estimate Cost</span>
              </div>
              <span>${{ cart.service.totalCost }}</span>
            </div>
          </div>
          <div v-if="cart.deploy && cart.deploy.totalCost">
            <div class="estimation-category__title">
              <h5 class="m-0 font-size-18 txt-secondary">Cloud Safe</h5>
              <div>
                  <a href="" @click.prevent="setTab('deploy-cloud')"><span class="fas fa-pen text-success font-size-15 mr-2"></span></a>
                  <a href="" @click.prevent="deleteDeploy()"><span class="fas fa-trash-alt text-danger font-size-15"></span></a>
              </div>
            </div>
            <div class="estimation-category__item">
              <div class="font-size-14 txt-primary">
                <span class="txt-bold">CPU: </span>
                <span class="">{{ cart.deploy.cpuDeploy.name }}</span>
              </div>
              <span class="font-size-14 txt-secondary">${{ cart.deploy.cpuDeploy.value }}</span>
            </div>
            <div class="estimation-category__item">
              <div class="font-size-14 txt-primary">
                <span class="txt-bold">RAM: </span>
                <span class="">{{ cart.deploy.ramDeploy.name }}</span>
              </div>
              <span class="font-size-14 txt-secondary">${{ cart.deploy.ramDeploy.value }}</span>
            </div>
            <div class="estimation-category__item">
              <div class="font-size-14 txt-primary">
                <span class="txt-bold">Persistant Volume: </span>
                <span class="">{{ cart.deploy.persistant.name }}</span>
              </div>
              <span class="font-size-14 txt-secondary">${{ cart.deploy.persistant.value }}</span>
            </div>
            <div class="estimation-category__item">
              <div class="font-size-14 txt-primary">
                <span class="txt-bold">Storage Type: </span>
                <span class="">{{ cart.deploy.workerQty.name }}</span>
              </div>
              <span class="font-size-14 txt-secondary">${{ cart.deploy.workerQty.value }}</span>
            </div>
            <div class="estimation-category__item">
                <div class="border-cost">
                  <div class="txt-primary">
                      <span class="txt-bold font-size-16">Estimate Cost</span>
                  </div>
                  <span class="font-size-16 txt-secondary">${{ cart.deploy.totalCost }}</span>
              </div>
            </div>
          </div>
          <table class="table table-borderless">
            <tbody>
              <tr>
                <td>
                  <p>TOTAL</p>
                </td>
                <td class="text-right">
                  <p>${{ cart.total }}</p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    setTab: {type: Function},
  },
  data: () => ({
    isDropped: false
  }),
  computed: {
    cart () {
      this.isDropped = !this.isDropped;
      return this.$store.getters.getCart;
    }
  },
  methods: {
    deleteStorage() {
      this.$store.commit('deleteStorage');
    },
    deleteService() {
      this.$store.commit('deleteService');
    },
    deleteDeploy() {
      this.$store.commit('deleteDeploy');
    }
  },
};
</script>

CSS

.slide-enter, .slide-leave-to{
  transform: scaleY(0);
}
.estimation-category{
  transform-origin: top;
  transition: transform .4s ease-in-out;
  overflow: hidden;
}

Answer 1

I think is not working because you are using the wrong css class. Give a name to the transition you want to use like :

    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>

fade is the name of the transition here, therefore you can use it in your css like this:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Answer 2

In Vue 3 the transition class names have been changed slightly, for consistency. Read docs here.

In short, both transition types (leave and enter) now start from {name}-{type}-from, end at {name}-{type}-to and have {name}-{type}-active applied while the transition is active.

Which means you have to replace .slide-enter with .slide-enter-from (slide-enter is no longer applied in Vue 3). e.g:

.slide-enter-from,
.slide-leave-to {
  transform: scaleY(0);
}
.estimation-category {
  transform-origin: top;
  transition: transform .4s ease-in-out;
}

See it working here.

Which fixes one transition.
If you want to have an individual transition for each cart item, you'll likely want to use <transition-group> instead of <transition> and run a v-for on the cartItems array, but the animation would be pretty much the same.
Here's a minimal example:

const Cart = {
  data: () => ({
    items: []
  }),
  methods: {
    addItem() {
      const lastItemId = this.items.length
        ? this.items[this.items.length - 1].id 
        : -1;
      this.items.push({id: lastItemId + 1, name: `item-${lastItemId + 1}`})
    },
    removeItem(item) {
      this.items = this.items.filter(el => el.id !== item.id)
    }
  }
}

Vue.createApp(Cart).mount('#cart')

.cart-item-wrapper {
  max-height: 53px;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), margin-bottom .35s cubic-bezier(.4,0,.2,1);
  margin-bottom: .5rem;
  background-color: #fff;
  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%);
  overflow: hidden;
}
.slide-enter-from,
.slide-leave-to {
  max-height: 0;
  margin-bottom: 0;
}
.cart-item {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}
.cart-item button {
  margin-left: 1rem;
}
#cart {
  max-width: 360px;
}
button {
  cursor: pointer;
}
body {
  background-color: #f5f5f5;
}

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="cart">
  <transition-group name="slide">
    <div class="cart-item-wrapper"
         :key="item.id"
         v-for="(item, key) in items">
      <div class="cart-item">
        {{ item.name }}
        <button @click="removeItem(item)">X</button>
      </div>
    </div>
  </transition-group>
  <button @click="addItem">Add Item</button>
</div>

In the above <transition-group> example I used a different transition than yours, but that shouldn't matter. The class names are the important bit and the fact the items are keyed by id, so the leaving transitions are mapped correctly (if, for example, we used their index in array as key, the leave transition would always happen on the last element).

Answer 3

<transition-group name="slide">
      <li>        
            item.name
      </li>
            item2.name
      <li>
</transition-group>

You can also use v-for here for li element(s).

This is styling:

<style lang="scss" scoped>
.slide-item {
  transition: all 1s;
}
.slide-enter {
  opacity: 0;
  transform: translateY(10px);
}
.slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
.slide-leave-active {
  position: absolute;
}
</style>

Answer 4

Vue transition wrappers affects only its immediate child. So you should organize your code based on this. I created a new show property and a button to set it to quickly show how it works: https://codesandbox.io/s/romantic-dirac-npi9s?file=/src/components/price-calculator/PriceEstimation.vue

In this case .estimation-category is animated, but in the original example, you are displaying its child based on your logic.

Answer 5

I believe you are using Vue 2. You can find the dynamic CSS classes in the docs. I would recommend having the transition controller outside of transition element. Also, please ensure that the content inside transition block becomes completely empty, in your case there is still some default content that is left. I used this CSS in my project which worked for me adjusted according to your transition name slide.

.slide-enter-active {
  @include transition-ease(all, .7s);
}

.slide-leave-active {
  @include transition-ease(all, .5s);
}

.slide-enter-to,
.slide-leave {
  max-height: 490px;
  overflow: hidden;
}

.slide-enter,
.slide-leave-to {
  overflow: hidden;
  max-height: 0;
}