<transition> : Keep Element where it was defined at "*-enter-to"

[DevKame]

I have an element that i want to fade into view when page gets opened, here is part of the component:

Template:

<div class="headlineWrapper position-relative overflow-hidden d-flex flex-column justify-content-start align-items-center">
      <div class="redLine m-0"></div>
      <h1 class="m-0 text-prim">Pizerria</h1>
      <div class="redLine m-0"></div>
      <transition appear name="pizza">
          <img src="@/assets/img/pizza/pizza.png" alt="pizza_picture" class="position-absolute">
      </transition>
</div>

Style:

    .pizza-enter-from {
        opacity: 0;
        bottom: -200%;
    }
    .pizza-enter-active {
        transition: all 1s ease;
    }
    .pizza-enter-to {
        opacity: 1;
        bottom: -100%;
    }

It just works how i want it, BUT:

as soon as the animation is over, the picutre just "jumps" unsmoothly in another position. And i might know why: i did only define a left attribute for this absolute element but no bottom or top Attribute. If i uncomment the bottom Attribute at

    .headlineWrapper img {
        width: 120%;
        left: -10%;
        /* bottom: -100%; */
    }

the element stays exactly where it should be. But no animation happens then there. Only the opacity happens smoothly but Vue totally ignores animating the bottom attribute. I think i just missed a small but important detail, but i dont know which one, so anyone can tell me?

I only provided snippets of the code og whom i thought is important: In case i missed something crucial, here the complete components code:

<template>
    <header class="d-flex flex-column justify-content-start align-items-center border border-success">
        <!-- WRAPPER FOR THE PALMS AND THE SVG HEADLINE -->
        <div class="palmsHeadlineWrapper d-flex flex-column jsutify-content-start align-items-center">
            <!-- WRAPPER FOR THE PALMS -->
            <div class="palmsWrapper">

            </div>

            <!-- WRAPPER FOR THE SVG HEADLINE INCLUDING TOP AND BOTTOM BORDER -->
            <div class="headlineWrapper position-relative overflow-hidden d-flex flex-column justify-content-start align-items-center">
                <div class="redLine m-0"></div>
                <h1 class="m-0 text-prim">Pizzeria</h1>
                <div class="redLine m-0"></div>
                <transition appear name="pizza">
                    <img src="@/assets/img/pizza/pizza.png" alt="pizza_picture" class="position-absolute">
                </transition>
            </div>
        </div>
    </header>
</template>


<style scoped>
    .headlineWrapper img {
        width: 120%;
        left: -10%;
        bottom: -100%;
    }
    .redLine {
        width:100%;
        height: 2px;
        background-color: var(--sec);
    }
    .headlineWrapper{
        width: 100%;
        padding-bottom: 30vh;
    }
    .palmsHeadlineWrapper {
        width: 100%;
    }
    header {
        height: calc(100vh - 50px);
        padding-top: 20vh;
    }

    .pizza-enter-from {
        opacity: 0;
        bottom: -200%;
    }
    .pizza-enter-active {
        transition: all 1s ease;
    }
    .pizza-enter-to {
        opacity: 1;
        bottom: -100%;
    }
</style>

[LinusBorg]

That's because the .headlineWrapper img (2 selectors) rule has higher specificity than the .pizza-enter-from (1 selector) rule.

[DevKame]

I understand that. thats why i commented it out. And then the animation works...it just doesnt stay in the endposition

[LinusBorg]

So change specificity so that the enter-to class' is not lower