Vue.js過渡到元素輸入視口

首先請否jQuery。 我可以這樣做在jQuery等，問題的關鍵是要做到這一點沒有不必要的依賴。Vue.js過渡到元素輸入視口

這裏的場景是我創建一個單獨的網頁，有幾個部分滾動瀏覽。一旦瀏覽器滾動到該部分，我想使用Vue.js's transitions簡單地淡入。我已經設法使轉換工作在appear attribute，但問題是這個初始渲染觸發器對屏幕外的元素起作用，並且我希望推遲該觸發器，直到瀏覽器在屏幕上滾動元素爲止。

我找到了一個像vue-observe-visibility這樣的庫，它可以滿足我需要的功能，但是我不想創建一個數據屬性的負載，只是爲了觸發器將其更改爲v-if語句的true觸發淡入效果。希望這是有道理的。

來源

2017-11-25 Peter Fox

使用指令的一種方法是擁有一個在滾動監聽器。當元素在視圖中時，然後添加一個將不透明度轉換爲1（或x-offset）的類。然後，一旦它在視野中，就摧毀聽衆。

這使得添加元素變得非常容易，因爲您無需爲每個項目管理狀態，只需將<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中這可能會導致一些聽衆徘徊。

來源

2017-11-26 07:41:21 Daniel

有趣的是，有沒有可能將這個事件重構一點讓事件在元素本身上，然後在第一次運行後從元素中移除？ –

是的，它可以... – Daniel

Vue.js過渡到元素輸入視口

回答

相關問題