- 首页
- 前端开发
- Vue.js 过渡到元素进入视口时出现/发生
Vue.js 过渡到元素进入视口时出现/发生
[英] Vue.js transition to appear/occur on element entering viewport
本文介绍了Vue.js 过渡到元素进入视口时出现/发生的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
首先请不要使用jQuery.我可以在 jQuery 等中做到这一点.，问题的关键是在没有不必要的依赖的情况下做到这一点.
这里的场景是我正在创建一个单页网站，其中包含多个要滚动浏览的部分.我想使用 Vue.js 的过渡 在浏览器滚动到那个位置后简单地淡入部分.我已经设法使用 出现属性 但问题是这个初始渲染触发器适用于屏幕外的元素，我想推迟该触发器，直到浏览器在屏幕上滚动元素.
我找到了一个像 vue-observe-visibility 这样的库适用于我需要的东西，但老实说，我不想仅仅为触发器创建大量数据属性，以将其更改为 true 以便 v-if 语句触发淡入效果.希望这是有道理的.
解决方案
使用指令的一种方式是有一个滚动监听器.当元素在视图中时，然后添加一个将不透明度转换为 1(或 x 偏移)的类.然后，一旦它出现，就销毁监听器.
这使得添加元素很容易，因为您不需要管理每个项目的状态，只需将 <div> 更改为 <div class="hidden hidden-left" v-infocus="'showElement'">，对于您想要执行此操作的每个对象.
新的 Vue ({el: '#app',数据() {}，方法: {}，指令:{焦点: {isLiteral: 真,插入:(el，绑定，vnode)=>{让 f = () =>{让 rect = el.getBoundingClientRect()让 inView = (矩形宽度>0 &&矩形高度>0 &&rect.top >= 0 &&rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))如果(在视图中){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:抗锯齿；-moz-osx-font-smoothing:灰度；文本对齐:居中；颜色:#2c3e50；边距顶部:60px；}div {最小高度:120px；}h1,h2{字体粗细:正常；}ul{列表样式类型:无；填充:0；}李{显示:内联块；边距:0 10px；}一个 {颜色:#42b983；}/* 类 */.隐藏{不透明度:0；}.hidden-right {变换:翻译(50px，0)；}.隐藏左{变换:翻译(-50px，0)；}.showElement {不透明度:1；变换:翻译(0, 0)；-webkit-transition:所有 0.5 秒缓出；-moz-transition:所有 0.5 秒缓出；过渡:所有 0.5 秒缓出；}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script><div id="应用程序"><div class="hidden" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-left" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-right" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-left" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-right" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-left" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-right" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-left" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-right" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-left" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-right" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-left" v-infocus="'showElement'"><h2>生态系统</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>
<div class="hidden hidden-right" v-infocus="'showElement'"><h2>生态系统</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>
... 只是，我希望在卸载组件时可以删除侦听器.我认为在 SPA 中，这可能会导致一些听众留下来.
Firstly please no jQuery. I could do this in jQuery etc., the point of the question is to do it without unnecessary dependencies.
The scenario here is I'm creating a single page website with several sections to scroll through. I want to use Vue.js's transitions to simply fade in once the browser has scrolled to that section. I've managed to make the transitions work with the appear attribute but the problem is this initial render trigger works on elements that are off screen and I want to defer that trigger until when the browser has scroll the element on screen.
I've found a library like vue-observe-visibility which would kind of works for what I need but honestly I don't want to create a load of data properties simply for the trigger to change it to true for a v-if statement to trigger the fade in effect. Hopefully that makes some sense.
解决方案
one way, using directives, would be have an on-scroll listener. when the element is in view, then add a class that transitions opacity to 1 (or x-offset). Then once it's in view, destroy the listener.
This makes is easy to add to elements, as you don't need to manage state for each item, just change <div> to <div class="hidden hidden-left" v-infocus="'showElement'">, for every object you want to do this for.
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>
... only, I wish I could remove the listener when the component is unmounted. I think in a SPA this could cause some listeners to stick around.
这篇关于Vue.js 过渡到元素进入视口时出现/发生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
