animation with <transition> not working

[Eskamedin]

I am working with vue 3 and <script setup>

This is a parent Element:

<template>
    <header class="theHeader border border-danger position-relative">

        <the-headlines :render-it="true"></the-headlines>

    </header>
</template>

<script setup>
import TheHeadlines from "./header_comps/TheHeadlines.vue";

</script>

and this is the child component TheHeadlines where i want its h1 tag to be faded in once:

<template>
    <div class=" headlineWrapper position-absolute p-xxl-0 d-flex flex-xxl-column justify-content-xxl-start align-items-xxl-start">
        <h2 class="smallHeadline headlines d-flex jsutify-content-center align-items-between">
            <span>K</span>
            <span>A</span>
            <span>M</span>
            <span>E</span>
            <span>D</span>
            <span>I</span>
            <span>N</span>
        </h2>
        <transition>
            <h1 v-if="render" class="bigHeadline headlines d-flex jsutify-content-center align-items-between">
                <span>W</span>
                <span>E</span>
                <span>B</span>
                <span>D</span>
                <span>E</span>
                <span>S</span>
                <span>I</span>
                <span>G</span>
                <span>N</span>
            </h1>
        </transition>
    </div>
</template>

<script setup>
import {defineProps, computed} from "vue";
let props = defineProps([
    "renderIt",
]);
console.log(props.renderIt);

let render = computed(() => {
    return props.renderIt;
})
</script>



<style scoped>
.v-enter-from {
    transform: translate(0, 50%);
    opacity: 0;
}
.v-enter-active {
    transition: all 1s ease-out;
}
.v-enter-to {
    transform: translate(0, 0);
    opacity: 1;
}
.bigHeadline span {
    background-image: linear-gradient(160deg, rgb(186, 193, 222) -20%, var(--prim) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 3px black);
}
.smallHeadline span {
    background-image: linear-gradient(145deg, rgba(186, 193, 222, .3), rgba(186, 193, 222, 0) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.smallHeadline {
    font-family: "Tektur Regular 400", sans-serif;
    letter-spacing: 4px;
    font-size: 50px;
}
.bigHeadline {
    font-family: "Tektur Bold 700", sans-serif;
    letter-spacing: 10px;
    font-size: 70px;
}
.headlineWrapper {
    bottom: 30%;
    left: 30%;
}
</style>

My h1-headline is there, but its not fading in. Its just there from the beginning like nobody used transition on it. I just elarned about animations and im pretty sure i just missed sth small, what is it?

What have i tried?

• just in case Vue has a problem with having multiple children inside my h1 (allthough h1 is the one and only root-element of <transition> ) i tried to applied the animation only on the first span
• i tried to change the concept of using start/to states with transition by using only an animation and commenting the start states out:

.v-enter-from {
    /* transform: translate(0, 50%);
    opacity: 0; */
}
.v-enter-active {
    animation: fade-in 2s ease-out forwards;
}
.v-enter-to {
    /* transform: translate(0, 0);
    opacity: 1; */
}
@keyframes fade-in {
    from {
        transform: translate(0, 50%);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

• and i tried using the inline attributes like that: <transition enter-from-class="von" enter-active-class="aktiv" enter-to-class="zu">...

[LinusBorg]

When you want the transition to happen also on tjr initial render, you need to set the appear prop on the transition component