Javascript Vue Js-仅当组件可见时转换

我正在使用transition标签进行一些转换，它们工作得非常好。问题是即使组件不可见也会发生转换，我希望只有当用户到达页面的该部分时才会发生转换。有没有办法用Vue做到这一点

HTML:

---

如果要在元素在视口中可见时转换元素，请查看相交观察者，并使用

v-If

有条件地渲染它。VueJS transition不会检查元素是否在视口中：这种逻辑必须由您自己实现。也许您应该侦听scroll事件，并在元素在视口中时渲染它。

    <transition name="products" appear>
        <h2 class="container">Products</h2>
    </transition>

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

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