ビューポートに入る要素でVue.jsの遷移が発生/発生する

Question

まずはjQueryを入力してください。 私はjQueryなどでこれを行うことができますが、問題のポイントは不要な依存関係なしに行うことです。

ここでは、スクロールする複数のセクションがある単一のページのWebサイトを作成しています。私はVue.js's transitionsを使用して、ブラウザがそのセクションにスクロールすると単純にフェードインしたいと思います。私はトランジションをappear attributeで動作させることに成功しましたが、問題はこの初期レンダリングトリガが画面外の要素に対して機能し、ブラウザが画面上の要素をスクロールするまでそのトリガを延期することです。

vue-observe-visibilityのようなライブラリが見つかりましたが、正直なところ私はデータプロパティのロードを作成したくないため、単にトリガーのためにそれをtrueに変更する必要はありません。フェードインを有効にします。うまくいけばそれはある意味があります。

Answer 1

片方向のディレクティブを使用すると、スクロールリスナーがあります。要素が表示されているときは、不透明度を1（またはxオフセット）に遷移させるクラスを追加します。その後、それが見えたら、リスナーを破壊してください。

各項目の状態を管理する必要がないため、これは要素に追加するのが簡単です。これを行うオブジェクトごとに<div>から<div class="hidden hidden-left" v-infocus="'showElement'">に変更するだけです。

new Vue ({ 
 
    el: '#app', 
 
    data() {}, 
 
    methods: {}, 
 
    directives: { 
 
    infocus: { 
 
     isLiteral: true, 
 
     inserted: (el, binding, vnode) => { 
 
     let f =() => { 
 
      let rect = el.getBoundingClientRect() 
 
      let inView = (
 
      rect.width > 0 && 
 
      rect.height > 0 && 
 
      rect.top >= 0 && 
 
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) 
 
     ) 
 
      if (inView) { 
 
      el.classList.add(binding.value) 
 
      window.removeEventListener('scroll', f) 
 
      } 
 
     } 
 
     window.addEventListener('scroll', f) 
 
     f() 
 
     } 
 
    } 
 
    } 
 
})

#app { 
 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    text-align: center; 
 
    color: #2c3e50; 
 
    margin-top: 60px; 
 
} 
 

 
div { 
 
    min-height: 120px; 
 
} 
 

 
h1, 
 
h2 { 
 
    font-weight: normal; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    margin: 0 10px; 
 
} 
 

 
a { 
 
    color: #42b983; 
 
} 
 
/* the classes */ 
 
.hidden { 
 
    opacity: 0; 
 
} 
 

 
.hidden-right { 
 
    transform: translate(50px, 0); 
 
} 
 

 
.hidden-left { 
 
    transform: translate(-50px, 0); 
 
} 
 

 
.showElement { 
 
    opacity: 1; 
 
    transform: translate(0, 0); 
 
    -webkit-transition: all 0.5s ease-out; 
 
    -moz-transition: all 0.5s ease-out; 
 
    transition: all 0.5s ease-out; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script> 
 
<div id="app"> 
 

 
    <div class="hidden" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-left" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-right" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-left" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-right" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-left" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-right" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-left" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-right" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-left" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-right" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-left" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="hidden hidden-right" v-infocus="'showElement'"> 
 
    <h2>Ecosystem</h2> 
 
    <ul> 
 
     <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> 
 
     <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> 
 
     <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> 
 
     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> 
 
    </ul> 
 
    </div> 
 

 
</div>

...唯一、私は部品がマウント解除されたときに、私は、リスナーを削除することができたいと思います。私はSPAの中で、これはいくつかのリスナーを抱かせる原因になると思います。