在Vue3中使元素在滚动视图时淡入

更新日期: 2020-06-04阅读: 2k标签: vue3

优秀的网站要对用户的互动做出反应。做到这一点的一个很好的方法就是对有人向下滚动你的页面做出反应。

除了视差组件和滚动事件外,添加响应式触摸的一种好方法是使元素在滚动视图时淡入。

在本技巧中,将介绍如何使用滚动事件和css转换在vue3中实现此功能。

这是我们将学习如何在本教程中进行构建的屏幕截图。



样式化我们的fadin元素

我们要做的第一件事是构建模板并设置组件样式。在此示例中,我们将使用空白块来说明事情如何进行。

因此,在我们的模板中,我们只想...

  • 包装容器 container

  • 一些full-width元素

  • 一些half-width元素添加一些变化

<template>
  <div class='container'>
    <div class='fade-in full-width' />
    <div class='fade-in full-width' />
    <div class='half-width fade-in' />
    <div class='half-width fade-in' />
  </div>
</template>

然后,要对它们进行样式设置,我们要构建一个基本的容器,然后使用一些填充,颜色和适当的宽度来对我们的块进行样式设置。

<style scoped>
  .container {
    width: 80%;
    min-width: 450px;
    margin: 0 auto;
  }

  .fade-in {
    background-color: #2ecc71;
    height: 500px;
    margin-bottom: 50px;
    opacity: 0;
    transition: 0.3s all ease-out;
    transform: scale(0.8);
    box-sizing: border-box;
    padding: 20px;
    display: inline-block;
  }
  .full-width{
    width: 100%;
  }

  .half-width {
    width: 47.5%;
  }

  .half-width:nth-of-type(2n + 1) {
    margin-right: 2.5%;
  }

  .half-width:nth-of-type(2n) {
    margin-left: 2.5%;
  }
</style>

需要注意的一件事是,我们所有的淡入元素均以默认不透明度0开始,我们将使用脚本来处理它们,我们还将改变元素的比例。

事实上,我们的淡入元素被赋予了一个过渡属性,这意味着当我们改变不透明度和比例时,它将在我们的两个值之间平滑地过渡——给我们想要的平滑效果。

所以,如果我们加载我们的页面,我们不应该看到任何东西——但我们应该能够向下滚动我们的页面,因为我们的元素就在那里,只是完全透明。

让我们使用一些Javascript使其可见。


使我们的元素淡入


在本教程中,我们将使用 Vue3 Composition api ——因此,在脚本中,我们首先要创建 setup 方法并导入一些生命周期hooks。

<script>
import { onMounted, onUnmounted } from 'vue'
export default {
  setup () {

    onMounted(() => {

    })

    onUnmounted(() => {

    })
  }
}
</script>

然后,我们创建一个包含所有淡入元素的数组。我们可以使用 document.getElementsByClassName 进行此操作-但是,这将返回 htmlCollection,并且我们需要一个数组,因此我们可以使用Javascript的 Array.from 方法进行强制转换。

onMounted(() => {
  fadeInElements = Array.from(document.getElementsByClassName('fade-in'))
})

现在我们有了一个要淡入的所有元素的数组,我们想要做一些事情:

  1. 每当视图被滚动时,就会在它们上面迭代。

  2. 确定元素是否可见。

  3. 如果是的话,将其淡入并从数组中删除

首先,我们要在安装(mounted)组件时创建滚动侦听器,并在卸载(unmounted)组件时将其删除。我们要做的另一件事是,在安装组件时调用 handleScroll 方法,以便加载某些内容,而无需用户滚动查看内容。

var fadeInElements = []

onMounted(() => {
  fadeInElements = Array.from(document.getElementsByClassName('fade-in'))
  document.addEventListener('scroll', handleScroll)
  handleScroll()
})

onUnmounted(() => {
  document.removeEventListener('scroll', handleScroll)
})

在滚动侦听器中,让我们创建一个 for 循环,用于遍历我们创建的淡入元素数组。

const handleScroll = (evt) => {
  for (var i = 0; i < fadeInElements.length; i++) {
    var elem = fadeInElements[i]
  }
}

此时,我们需要某种辅助方法来确定元素是否可见。为此,我们将使用元素的bounding rectangle 返回元素相对于视口的大小和位置。

我们还要添加一个小的缓冲区,所以在淡入之前,至少有 200px 的元素必须是可见的。这将真正增强效果,因为它可以确保网站访问者能看到正在发生的事情。如果没有这个缓冲区,我们的淡入过渡会在我们元素的1个像素出现在屏幕上时触发,而大部分的元素会在视口之外。

const isElemVisible = (el) => {
  var rect = el.getBoundingClientRect()
  var elemTop = rect.top + 200 // 200 = buffer
  var elemBottom = rect.bottom
  return elemTop < window.innerHeight && elemBottom >= 0
}

回到滚动事件侦听器内部,我们想了解每个元素的 isElemVisible 帮助法是否为 true 。如果是这样,我们要更改元素的不透明度和比例,然后将其从数组中删除。

for (var i = 0; i < fadeInElements.length; i++) {
  var elem = fadeInElements[i]
  if (isElemVisible(elem)) {
    elem.style.opacity = '1'
    elem.style.transform = 'scale(1)'
    fadeInElements.splice(i, 1) // 只让它运行一次
  }
}

现在,如果我们回到我们的应用程序中去检查一下,你会发现,当我们滚动时,元素会变得清晰可见。这正是我们想要的!


完成!

于是,我们就有了我们一直在寻找的淡入滚动效果!有很多方法可以扩展这个效果,比如说。

  • 滚动时使元素淡出,以便可以再次淡入。

  • 使用CSS动画代替过渡,增加更多的高级动画。

  • 将逻辑提取到自定义指令中,以便可以在整个项目中重复使用。

只要你掌握了 滚动侦听器 和 CSS animations/transitions 的窍门,那么你就能做到无懈可击。

我希望你学到了一两件事,并且可以想到一些很酷的方法来将其中一些技术添加到自己的Vue项目中。

来自:https://mp.weixin.qq.com/s/--yjgS5119z1AV-m-ULYgQ


链接: https://www.fly63.com/article/detial/9299

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!