vue 组件封装 | s-scroll 页面滚动动画

简介: vue 组件封装 | s-scroll 页面滚动动画

目标

实现类似插件 wow.js 的页面滚动时,加载动画的效果( wow.js的教程详见 https://blog.csdn.net/weixin_41192489/article/details/111088137)

实现思路

根据指定元素与浏览器窗口顶部的距离是否小于浏览器窗口的高度来判断元素是否进入浏览器窗口

核心要点

1. 要动态生成ref , 避免组件复用时,出现重复的ref (注意:要在页面加载前执行,即放在created 生命周期中)

        created() {
            // 动态生成ref
            this.ref = (Math.random() * 10000000).toString(16).substr(0, 4) + (new Date()).getTime() + Math.random().toString().substr(2, 5);
        },

2. 获取浏览器窗口高度

// 获取浏览器窗口高度
this.screeHeight = document.documentElement.clientHeight

3. 在滚动事件中,实时更新浏览器窗口高度(因浏览器缩放时,浏览器窗口高度会发生变化)

4. 获取元素与浏览器窗口顶部之间的距离

// 获取元素与浏览器窗口顶部之间的距离
let targetTop = this.$refs[this.ref].getBoundingClientRect().top

s-scroll 完整代码

src/plugins/SUI/s-scroll.vue

<template>
    <div style="display: inline-block;">
        <transition
                :enter-active-class="inClass"
                :leave-active-class="outClass"
        >
            <div v-show="show" :ref="ref">
                <slot></slot>
            </div>
        </transition>
    </div>
</template>
<script>
    export default {
        props: {
            inClass: String,
            outClass: String
        },
        data() {
            return {
                screeHeight: 0,
                ref: '',
                show: false,
            }
        },
        created() {
            // 动态生成ref
            this.ref = (Math.random() * 10000000).toString(16).substr(0, 4) + (new Date()).getTime() + Math.random().toString().substr(2, 5);
        },
        mounted() {
            this.$nextTick(
                () => {
// 获取浏览器窗口高度
this.screeHeight = document.documentElement.clientHeight
                    // 监听页面滚动事件
                    window.addEventListener("scroll", this.scrolling)
                    this.scrolling()
                }
            )
        },
        methods: {
            scrolling() {
                // 更新浏览器窗口高度
                this.screeHeight = document.documentElement.clientHeight
// 获取元素与浏览器窗口顶部之间的距离
let targetTop = this.$refs[this.ref].getBoundingClientRect().top
                // 当距离小于浏览器窗口的高度(即元素进入浏览器窗口时),开启过渡动画,显示元素
                if (targetTop < this.screeHeight) {
                    this.show = true;
                } else {
                    this.show = false;
                }
            },
        }
    }
</script>
<style scoped>
</style>

使用范例代码

<template>
    <div>
        <div class="box100">0</div>
        <div class="box100">100</div>
        <div class="box100">200</div>
        <div class="box100">300</div>
        <div class="box100">400</div>
        <div class="box100">500</div>
        <div class="box100">600</div>
        <div class="box100">700</div>
        <s-scroll
                inClass="rollIn"
                outClass="rollOut"
        >
            <div class="circle200">自定义动画</div>
        </s-scroll>
        <s-scroll
                inClass="animate__animated animate__rollIn  animate__slower"
                outClass="animate__animated animate__rollOut  animate__slower"
        >
            <div class="circle200">animate.css动画</div>
        </s-scroll>
        <div class="box100">1000</div>
        <div class="box100">1100</div>
        <div class="box100">1200</div>
    </div>
</template>
<script>
    export default {}
</script>
<style scoped>
    .box100 {
        height: 100px;
        background: #3a8ee6;
        border: 1px solid black;
    }
 
    .circle200 {
        height: 200px;
        width: 200px;
        background: red;
        border-radius: 50%;
        text-align: center;
        line-height: 200px;
    }
 
    /*滚入——从左侧*/
    @keyframes rollIn {
        0% {
            opacity: 0;
            transform: translate(-100%) rotate3d(0, 0, 1, -360deg);
        }
        100% {
            opacity: 1;
        }
    }
 
    /*滚出——从左侧*/
    @keyframes rollOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: translate(-100%) rotate3d(0, 0, 1, -360deg);
        }
    }
 
    /*滚入——从左侧*/
    /deep/ .rollIn {
        animation: rollIn 1s;
    }
 
    /*滚出——从左侧*/
    /deep/ .rollOut {
        animation: rollOut 1s;
    }
</style>


目录
打赏
0
0
0
0
64
分享
相关文章
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
147 0
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
136 17
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
73 1
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1151 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
340 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
221 77
Vue 文件批量下载组件封装完整使用方法及优化方案解析
本文详细介绍了批量下载功能的技术实现与组件封装方案。主要包括两种实现方式:**前端打包方案(基于file-saver和jszip)** 和 **后端打包方案**。前者通过前端直接将文件打包为ZIP下载,适合小文件场景;后者由后端生成ZIP文件流返回,适用于大文件或大量文件下载。同时,提供了可复用的Vue组件`BatchDownload`,支持进度条、失败提示等功能。此外,还扩展了下载进度监控和断点续传等高级功能,并针对跨域、性能优化及用户体验改进提出了建议。可根据实际需求选择合适方案并快速集成到项目中。
154 17
Vue 手风琴实现的三种常用方式及长尾关键词解析
手风琴效果是Vue开发中常见的交互组件,可节省页面空间、提升用户体验。本文介绍三种实现方式:1) 原生Vue结合数据绑定与CSS动画;2) 使用Element UI等组件库快速构建;3) 自定义指令操作DOM实现独特效果。每种方式适用于不同场景,可根据项目需求选择。示例包括产品特性页、后台菜单及FAQ展示,灵活满足多样需求。附代码示例与资源链接,助你高效实现手风琴功能。
102 10
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问