How to make animations only work for certain values?-CodePudding

I'm using tailwind and I have a div with these classes fixed top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2.

I'm trying to make an animation that starts from opacity: 0; translate: scale(0.5); and ends at the defaults which are opacity: 1; translate: scale(1);

Currently, it animates the translate-y and translate-x from tailwind classes. Is there a way to make it only animate the scale() of the element?

EDIT: Full component:

<template>
    <transition name="AddTask">
        <div  v-if="$store.state.AddTaskShown">
            <div >
                <h1 >Add New Task</h1>
                <label>
                    Task Name:
                    <input placeholder="Name" type="text" >
                </label>
                <label>
                    <input placeholder="Description" type="text" >
                </label>
                <label>
                    <input placeholder="Date" type="date" > 
                </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>

CodePudding user response：

you can't do that - not because of tailwind but because of css. you can only apply transition to properties, not property values.

there's a way you can go around this with flexbox. just create a wrapper div for it.

<div >
   <!-- div with animation here -->
</div>