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过渡到元素输入视口

回答

相关问题