Vue transition on static element not working

Question

I am trying to apply a very simple transition to div within in a Vue component. The element is not dependent on state or anything -- it just needs to slide in from the right when the component displays. For some reason, the transition I've set up is not working.

The component appears on my page as:

<MenuSideBar v-if="displayMenu" slide-right :items="menuItems />

And within that component, I have:

   <template> 
      <transition name="slide">
                <div v-if="slideRight" class="menu-container">
                    <div  class="menu-inner">
                        <Menu :items="items />
                    </div>
                </div>
            </transition>
   </template>

In my CSS for the transitions, I have:

   .menu-container {
        left: 0;
        position: absolute;
        top: 0;
        width: 25vw;
    }
   .slide-enter{
        right: -1000px;
    }

    .slide-enter-active {
        transition: right 0.5s ease;
    }

    .slide-enter-to{
        right: 0;
    }

But when this component is displayed, there is no sliding in transition on that element.

Can anyone offer any advice on what I'm doing wrong?

Answer 1

For the sake of completeness, I'm posting my comment as the answer.

It seems like you want the transition to happen when the element is first rendered. To achieve that, you will need to add the appear attribute:

<template> 
    <transition name="slide" appear>
            <div v-if="slideRight" class="menu-container">
                <div  class="menu-inner">
                    <Menu :items="items />
                </div>
            </div>
        </transition>
</template>