Vue Js - Transition only when component is visible

Question

I am making some transitions using the Transition tag and they are working perfectly. The problem is that transitions happen even if the component is not visible, I wanted it to happen only when the user arrived at that part of the page. Is there any way to do this with Vue?

HTML:

    <transition name="products" appear>
        <h2 class="container">Alguns dos nossos produtos</h2>
    </transition>

CSS:

    @keyframes slide-in {
        from { transform: translateX(-60px); }
        to { transform: translateX(0); }
    }

        .products-enter-active {
        animation: slide-in 2s ease;
    }