javascript - Vue Js - 仅在组件可见时转换

Question

我正在使用过渡标签进行一些过渡，它们运行良好。问题是即使组件不可见也会发生转换，我希望它仅在用户到达页面的该部分时发生。有没有办法用 Vue 做到这一点？

HTML：

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

CSS：

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

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

标签： javascriptcssvue.js