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"></span>
</div>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">Specification</span>
<span class="ml-2"></span>
</div>
<span>$</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"> GHz</span>
</div>
<span>$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">vRAM</span>
<span class="ml-2"> Gb</span>
</div>
<span>$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">Capacity</span>
<span class="ml-2"></span>
</div>
<span>$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">Server Qty</span>
<span class="ml-2"></span>
</div>
<span>$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">Storage Type</span>
<span class="ml-2"></span>
</div>
<span>$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">OS</span>
<span class="ml-2"></span>
</div>
<span>$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">Database</span>
<span class="ml-2"></span>
</div>
<span>$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">Firewall</span>
<span class="ml-2"></span>
</div>
<span>$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">Estimate Cost</span>
</div>
<span>$</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"></span>
</div>
<span>$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">Package-type</span>
<span class="ml-2"></span>
</div>
<span >$</span>
</div>
<div class="d-flex justify-content-between px-2">
<div>
<span class="font-weight-bold">Estimate Cost</span>
</div>
<span>$</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=""></span>
</div>
<span class="font-size-14 txt-secondary">$</span>
</div>
<div class="estimation-category__item">
<div class="font-size-14 txt-primary">
<span class="txt-bold">RAM: </span>
<span class=""></span>
</div>
<span class="font-size-14 txt-secondary">$</span>
</div>
<div class="estimation-category__item">
<div class="font-size-14 txt-primary">
<span class="txt-bold">Persistant Volume: </span>
<span class=""></span>
</div>
<span class="font-size-14 txt-secondary">$</span>
</div>
<div class="estimation-category__item">
<div class="font-size-14 txt-primary">
<span class="txt-bold">Storage Type: </span>
<span class=""></span>
</div>
<span class="font-size-14 txt-secondary">$</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">$</span>
</div>
</div>
</div>
<table class="table table-borderless">
<tbody>
<tr>
<td>
<p>TOTAL</p>
</td>
<td class="text-right">
<p>$</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;
}
from Vue transition slide down for each item
No comments:
Post a Comment