I'm currently utilizing tailwind CSS and have a div that includes the following classes:
fixed top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2The goal is to create an animation that initiates with
opacity: 0; scale(0.5) transformation; opacity: 1; scale(1) transformation;At present, it animates both the translate-y and translate-x from the tailwind classes.
Is there a way to exclusively animate the scale() of the element?
EDIT: Full component:
<template>
<transition name="AddTask">
<div class="fixed left-0 right-0 top-0 bottom-0 flex items-center justify-center bg-slate-500 w-5/6 h-4/5 z-10 rounded-xl" v-if="$store.state.AddTaskShown">
<div class="m-4">
<h1 class="text-3xl mb-4">Add New Task</h1>
<label>
Task Name:
<input placeholder="Name" type="text" class="block my-5 w-full mx-auto border-slate-600 bg-slate-500 outline-none border-b-2">
</label>
<label>
<input placeholder="Description" type="text" class="block my-5 w-full mx-auto border-slate-600 bg-slate-500 outline-none border-b-2">
</label>
<label>
<input placeholder="Date" type="date" class="block my-5 w-full mx-auto border-slate-600 bg-slate-500 outline-none border-b-2">
</label>
</div>
</div>
</transition>
</template>
<script>
export default {};
</script>
<style scoped>
.AddTask-enter-from{
opacity: 0;
transform: scale(0.5);
}
.AddTask-enter-to{
opacity: 1;
transform: scale(1);
}
.AddTask-enter-active{
transition: all 0.15s ease-in;
}
</style>