How to disable transition-group only on page load?

Question

I have a transition-group that renders a div, and within that is a component with a v-for attribute that renders several items. I then have a button that adds a new item to the beginning of the array. That transition works perfectly.

The only thing I don't like, is that the entire list loads with the transition on page load, and I'd like to disable it only on page load. I've searched Stack and Google but couldn't find a way. Is there a way to do this, so that transitions still works on button click, but is disabled for page load?

    <transition-group
        name="item-list"
        tag="div">
        <item-row
            v-for="item in items"
            :key="item.id"
            :item="item" />
    </transition-group>

    .item-list-enter-active,
    .item-list-leave-active,
    .item-list-move {
        transition         : 250ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
        transition-property: opacity, transform;
    }
    
    .item-list-enter {
        opacity  : 0;
        transform: translateX(50px) scaleY(0.5);
    }
    
    .item-list-enter-to {
        opacity  : 1;
        transform: translateX(0) scaleY(1);
    }
    
    .item-list-leave-active {
        position: absolute;
    }
    
    .item-list-leave-to {
        opacity         : 0;
        transform       : scaleY(0);
        transform-origin: center top;
    }

Answer 1

I wish I could've found a more "Vue-y" way of handling this, however I ended up going this route. Essentially I added a class to the body and removed all transitions. Then on the created lifecycle of my component, I remove that class. This removes the transition on page load, but still keeps the transition on click of the button like I want.