首页 > 其他分享 >通过指令的方式来实现元素加载过渡效果

通过指令的方式来实现元素加载过渡效果

时间:2023-06-09 17:23:18浏览次数:35  
标签:el const ob animationMap 指令 过渡 entry animation 加载

页面上如何使用 给需要过渡的元素添加 v-slide-in 指令

<template>
    <div class="continer">
        <div v-slide-in class="item">1</div>
        <div v-slide-in class="item">2</div>
        <div v-slide-in class="item">3</div>
        ...
    </div>
</template>

效果:当元素出现在试图后,会缓动到目标位置

 

指令代码:

const DISTANCE = 100;
const DURATION = 500;

const animationMap = new WeakMap()
const ob = new IntersectionObserver((entires) => {
    for(const entry of entires){
        if(entry.isIntersecting){
            animationMap.get(entry.target).play()
            ob.unobserve(entry.target)
        }
    }

})

function isBelowViewPort (el) {
    const rect = el.getBoundingClientRect();
    return rect.top > window.innerHeight;
}
export default {
    
    mounted(el){
        setTimeout(() => {
            if(!isBelowViewPort(el)){   //只有当元素在视口top值下面的时候才会触发animate
                return;
            }
            const animation = el.animate(
                [
                    {
                        transform: `translateY(${DISTANCE}px)`,
                        opacity:0.5
                    },
                    {
                        transform: `translateY(0px)`,
                        opacity:1,
                    }
                ], 
                {
                    duration: DURATION,
                    easing: 'ease'
                }
            )
            animation.pause()
            animationMap.set(el, animation)
            ob.observe(el)
        },0)

    },
    unmounted(el){
       ob.unobserve(el)
    }
}

 

标签:el,const,ob,animationMap,指令,过渡,entry,animation,加载
From: https://www.cnblogs.com/xuhuang/p/17469776.html

相关文章

  • 双亲委派模型【类加载器】
    一、描述如果一个类加载器收到了类加载的请求,它首先不会自己去加载这个类,而是把这个请求委派给父类加载器去完成,每一层的类加载器都是如此,这样所有的加载请求都会被传送到顶层的启动类加载器中,只有当父加载无法完成加载请求(它的搜索范围中没找到所需的类)时,子加载器才会尝试去......
  • CSS 图片加载提前占位 padding-top、padding-bottom
    今天聊一个图片加载提前占位的一个问题......
  • C语言 #pragma指令
    简介#pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的情况下,给出主机或操作系统专有的特征。依据定义,编译指示是机器或操作系统专有的,且对于每个编译器都是不同的#pragma用于指示编译器完成一些特定的动作#pragma所定义的很多指示字是编译器特有的#pr......
  • apache 使用 mod_fcgid.so模块时 配置指令
    FcgidBusyScanInterval指令说明:扫描繁忙超时进程的间隔语法: FcgidBusyScanInterval seconds默认:FcgidBusyScanInterval120环境: 服务器配置状态:外部对应的老指令:BusyScanInterval该模块将执行FcgidBusyTimeout检查,在此区间。FcgidBusyTimeout指令说明:杀死处理请求超过Fcgi......
  • 类加载器
    一、介绍实现通过类的权限定名获取该类的二进制字节流的代码块叫做类加载器。二、作用负责将.class文件(存储的物理文件)加载到内存中三、类加载的分类1.分类Bootstrapclassloader:虚拟机的内置类加载器,通常表示为null,并且没有父nullPlatf......
  • element-ui中Select 选择器异步加载下一页
    场景当我们使用Select选择器存放大量数据的时候。会发现存在这么2个问题。1.接口响应时间较长。(因为数据量较多,一次查询的所有)甚至有可能超时。2.前端下拉框滑动卡顿。这个时候们如何解决上面面临的问题呢?有的小伙伴可能会说:1.分页加载。确实是可以解决问题。2.页面卡顿......
  • 同一个服务需要使用同一个依赖(jar)的不同版本的解决方案(类加载器方案)
    当使用类加载器隔离来处理同一依赖的不同版本时,可以创建自定义的类加载器来加载各自的版本。以下是一个简单的示例,演示如何使用类加载器隔离不同版本的依赖://自定义类加载器publicclassCustomClassLoaderextendsClassLoader{privateStringjarPath;publicCus......
  • html照片从模糊到清晰的渐变加载显示方法
    1.背景介绍在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差。 2.现状现在加载照片的方法主要有一下两种:(1)最原始的方式在html页面直接用img标签加载显示照片。该方法在网络速度比较慢或者要显示的照片比较大的时候会......
  • jquery Mobile点击显示加载等待效果
    点击某个按钮或链接时,触发等待加载效果:<script><!--$(document).bind("mobileinit",function(){});$(function(){//默认设置,一个小圈圈在转$('#default').live('tap',function(){$.mobile.loadingMessageTe......
  • 使用GDB调试断点信息是gdb动态添加或取消的还是将断点烧录到elf文件的?断点信息是如何
    使用GDB调试断点信息是gdb动态添加或取消的还是将断点烧录到elf文件的?断点信息是如何加载进单片机的并进行加下来的调试运行的? from:GPT-4GDB(GNU调试器)是一个用于调试程序的强大工具,它可以让你设置断点、检查变量和内存、执行单步调试等。在单片机(微控制器)上使用GDB进行调试......