当前位置: 首页 > news >正文

vueRouter路由切换时实现页面子元素动画效果, 左右两侧滑入滑出效果

说明

vue路由切换时,当前页面左侧和右侧容器分别从两侧滑出,新页面左右分别从两侧滑入

效果展示

路由切换-滑入滑出效果

在这里插入图片描述

难点和踩坑

  1. 现路由和新路由始终存在一个页面根容器,通过<transition>组件,效果只能对页面根容器有效。
  2. 如果通过组件(页面)级路由守卫(进入、退出)来改变受控变量,模版对左右容器v-if + <transition>设置效果。
    • 路由切换是一瞬间的事,滑出动画来不及触发,路由就改变了
    • 所有页面都需要改造
    • 我确实没找到路由守卫进入事件 只有 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
  3. 如果纯通过onMounted和onUnMounted等钩子实现,和2的问题基本差不多

实现方式

基于<template>组件的钩子函数完全自主实现过渡效果.

钩子函数说明
beforeEnter在元素被插入到 DOM 之前被调用
enter在元素被插入到 DOM 之后的下一帧被调用
afterEnter当进入过渡完成时调用。
enterCancelled当进入过渡在完成之前被取消时调用
beforeLeave在 leave 钩子之前调用, 大多数时候,你应该只会用到 leave 钩子
leave在离开过渡开始时调用
afterLeave在离开过渡完成, 且元素已从 DOM 中移除时调用
leaveCancelled仅在 v-show 过渡中可用

直接上代码

<router-view> 改造

<router-view v-slot="{ Component }"><transitionmode="default":css="false"@before-leave="onBeforeLeave"@before-enter="onBeforeEnter"@enter="onEnter"@leave="onLeave"><component :is="Component"></component></transition>
</router-view>

钩子函数

/*** left-wrap和right-wrap 为路由页面中左右两侧模块*/// 退出前的钩子
const onBeforeLeave = (el: any) => {const left = el.querySelector('.left-wrap')const right = el.querySelector('.right-wrap')if (!left || !right) {return}left.style.transform = 'translateX(0)'right.style.transform = 'translateX(0)'
}
// 退出时的钩子
const onLeave = (el: any, done: Function) => {const left = el.querySelector('.left-wrap')const right = el.querySelector('.right-wrap')if (!left || !right) {done()return}left.style.transition = 'all 0.3s linear'right.style.transition = 'all 0.3s linear'left.style.transform = 'translateX(-120%)'right.style.transform = 'translateX(120%)'/*** 这里延迟done是为了过渡效果完成后再彻底退出* 如果将时长改大一点, 页面审查元素就能看到,* 路由切换时, 当前路由和新路由同时存在于页面, 当定时结束,done被调用时, 原路由组件才消失*/setTimeout(() => {done() // 完成过渡}, 300)
}// 进入前的钩子
const onBeforeEnter = (el: any) => {const left = el.querySelector('.left-wrap')const right = el.querySelector('.right-wrap')if (!left || !right) {return}left.style.transform = 'translateX(-120%)'right.style.transform = 'translateX(120%)'
}
// 进入时的钩子
const onEnter = (el: any, done: Function) => {const left = el.querySelector('.left-wrap')const right = el.querySelector('.right-wrap')if (!left || !right) {done()return}left.style.transition = 'all 0.5s linear'right.style.transition = 'all 0.5s linear'// 这里延时是为了等待原路由退出效果完成, 再为新路由组件设置进入效果setTimeout(() => {left.style.transform = 'translateX(0)'right.style.transform = 'translateX(0)'done() // 完成过渡}, 300)
}

总计

  • 多调整参数看效果,就能大概猜出transition组件的实现原理
  • 通过钩子函数自定义过渡或动画效果,可操作性确实大,就是有点麻烦

相关文章:

vueRouter路由切换时实现页面子元素动画效果, 左右两侧滑入滑出效果

说明 vue路由切换时&#xff0c;当前页面左侧和右侧容器分别从两侧滑出&#xff0c;新页面左右分别从两侧滑入 效果展示 路由切换-滑入滑出效果 难点和踩坑 现路由和新路由始终存在一个页面根容器&#xff0c;通过<transition>组件&#xff0c;效果只能对页面根容器有效…...

MacOS编译hello_xr——记一次CMake搜索路径限制导致的ANDROID_NATIVE_APP_GLUE not found

首先,由于之前使用过Unity, 系统已经装好了android SDK和NDK, 所以在hello_xr文件夹下, 用local.properties文件来设置系统中二者的路径: sdk.dir/Applications/Unity/Hub/Editor/2022.3.48f1c1/PlaybackEngines/AndroidPlayer/SDK/ # ndk.dir/Applications/Unity/Hub/Editor/…...

基于NI Vision和MATLAB的图像颜色识别与透视变换

1. 任务概述 利用LabVIEW的NI Vision模块读取图片&#xff0c;对图像中具有特征颜色的部分进行识别&#xff0c;并对识别的颜色区域进行标记。接着&#xff0c;通过图像处理算法检测图像的四个顶点&#xff08;左上、左下、右上、右下&#xff09;&#xff0c;并识别每个顶点周…...

【Linux:IO多路复用(select、poll函数)

目录 什么是IO多路复用&#xff1f; select: 参数介绍&#xff1a; select函数返回值&#xff1a; fd_set类型&#xff1a; 内核如何更新集合中的标志位 处理并发问题 处理流程的步骤&#xff1a; poll: poll的函数原型&#xff1a; 参数介绍&#xff1a; select与p…...

计数排序(C语言)

一、步骤 1.首先&#xff0c;遍历数组统计出相同元素出现的次数 2.根据统计的结果将序列收回到原来的数组 方法&#xff1a;我们可以建立一个临时数组用来存储元素出现的次数&#xff0c;然后用该数组的下标表示该元素&#xff08;即假设i为临时数组的下标&#xff0c;a[i]为…...

LabVIEW弧焊参数测控系统

在现代制造业中&#xff0c;焊接技术作为关键的生产工艺之一&#xff0c;其质量直接影响到最终产品的性能与稳定性。焊接过程中&#xff0c;电流、电压等焊接参数的精确控制是保证焊接质量的核心。基于LabVIEW开发的弧焊参数测控系统&#xff0c;通过实时监控和控制焊接过程中关…...

Android笔记(三十七):封装一个RecyclerView Item曝光工具——用于埋点上报

背景 项目中首页列表页需要统计每个item的曝光情况&#xff0c;给产品运营提供数据报表分析用户行为&#xff0c;于是封装了一个通用的列表Item曝光工具&#xff0c;方便曝光埋点上报 源码分析 核心就是监听RecyclerView的滚动&#xff0c;在滚动状态为SCROLL_STATE_IDLE的时…...

【Linux】内核模版加载modprobe | lsmod

modprobe modprobe 是一个用于加载和卸载 Linux 内核模块的命令。它不仅能够加载单个模块&#xff0c;还能处理模块之间的依赖关系&#xff0c;确保所有依赖的模块都被正确加载。以下是一些关于 modprobe 命令的基本用法和常见选项的详细介绍。 基本语法 modprobe [option…...

Android从Drawable资源Id直接生成Bitmap,Kotlin

Android从Drawable资源Id直接生成Bitmap,Kotlin val t1 System.currentTimeMillis()val bmp getBmpFromDrawId(this, R.mipmap.ic_launcher_round)Log.d("fly", "1 ${bmp?.byteCount} h${bmp?.height} w${bmp?.width} cost time${System.currentTimeMillis…...

蓝桥杯——数组

1、移动数组元素 package day3;import java.util.Arrays;public class Demo1 {public static void main(String[] args) {int[] arr {1,2,3,4,5,6};int k 2;int[] arr_new f(arr,k);for (int i : arr_new) {System.out.print(i",");}//或System.out.println();St…...

在Flutter中,禁止侧滑的方法

在Flutter中&#xff0c;如果你想禁用侧滑返回功能&#xff0c;你可以使用WillPopScope小部件&#xff0c;并在onWillPop回调中返回false来阻止用户通过侧滑返回到上一个页面。 class DisableSwipePop extends StatelessWidget {overrideWidget build(BuildContext context) {…...

黑盒测试案例设计方法的使用(1)

黑盒测试用例的设计是确保软件质量的关键步骤之一。 一、等价类划分法 定义&#xff1a;把所有可能的输入数据&#xff0c;即程序的输入域划分成若干部分&#xff08;子集&#xff09;&#xff0c;然后从每一个子集中选取少数具有代表性的数据作为测试用例。 步骤&#xff1a…...

第二十一章 TCP 客户端 服务器通信 - 客户端OPEN命令

文章目录 第二十一章 TCP 客户端 服务器通信 - 客户端OPEN命令客户端OPEN命令 第二十一章 TCP 客户端 服务器通信 - 客户端OPEN命令 客户端OPEN命令 客户端OPEN命令与服务器端OPEN命令只有一个方面的不同&#xff1a;第一个设备参数必须指定要连接的主机。要指定主机&#xf…...

pycharm报错:no module named cv2.cv2

1、问题概述&#xff1f; 在项目中报错no module named cv2.cv2&#xff0c;就会导致import cv2 as cv无法使用。 需要安装opencv-python,一个开源的计算机视觉库。 2、解决办法&#xff1f; 【第一步&#xff1a;如果当前环境中已经安装&#xff0c;先卸载】 有时候会出现…...

Android音视频直播低延迟探究之:WLAN低延迟模式

Android WLAN低延迟模式 Android WLAN低延迟模式是 Android 10 引入的一种功能&#xff0c;允许对延迟敏感的应用将 Wi-Fi 配置为低延迟模式&#xff0c;以减少网络延迟&#xff0c;启动条件如下&#xff1a; Wi-Fi 已启用且设备可以访问互联网。应用已创建并获得 Wi-Fi 锁&a…...

docker 部署freeswitch(非编译方式)

一&#xff1a;安装部署 1.拉取镜像 参考&#xff1a;https://hub.docker.com/r/safarov/freeswitch docker pull safarov/freeswitch 2.启动镜像 docker run --nethost --name freeswitch \-e SOUND_RATES8000:16000 \-e SOUND_TYPESmusic:en-us-callie \-v /home/xx/f…...

OpenHarmony的公共事件

OpenHarmony的公共事件 公共事件简介 CES&#xff08;Common Event Service&#xff0c;公共事件服务&#xff09;为应用程序提供订阅、发布、退订公共事件的能力。 公共事件分类 公共事件从系统角度可分为&#xff1a;系统公共事件和自定义公共事件。 系统公共事件&#…...

深度学习transformer

Transformer可是深度学习领域的一个大热门呢&#xff01;它是一个基于自注意力的序列到序列模型&#xff0c;最初由Vaswani等人在2017年提出&#xff0c;主要用于解决自然语言处理&#xff08;NLP&#xff09;领域的任务&#xff0c;比如机器翻译、文本生成这些。它厉害的地方在…...

低成本出租屋5G CPE解决方案:ZX7981PG/ZX7981PM WIFI6千兆高速网络

刚搬进新租的房子&#xff0c;没有网络&#xff0c;开个热点&#xff1f;续航不太行。随身WIFI&#xff1f;大多是百兆级网络。找人拉宽带&#xff1f;太麻烦&#xff0c;退租的时候也不能带着走。5G CPE倒是个不错的选择&#xff0c;插入SIM卡就能直接连接5G网络&#xff0c;千…...

【黑马点评debug日记】redis登录跳转不成功

登录后一直跳转登录界面&#xff1b; debug: 网络日志报401&#xff0c; 说明前端获取的token为空&#xff1b; 查看应用程序&#xff0c; 发现没有token存储信息 前端网页增加 sessionStorage.setItem("token", data); 记得刷新网页 成功存储token...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II(Linked List Cycle II)详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法 大家好,我是Echo_Wish。最近刷短视频、看直播,有没有发现,越来越多的应用都开始“懂你”了——它们能感知你的情绪,推荐更合适的内容,甚至帮客服识别用户情绪,提升服务体验。这背后,神经网络在悄悄发力,撑起…...

如何做好一份技术文档?从规划到实践的完整指南

如何做好一份技术文档&#xff1f;从规划到实践的完整指南 &#x1f31f; 嗨&#xff0c;我是IRpickstars&#xff01; &#x1f30c; 总有一行代码&#xff0c;能点亮万千星辰。 &#x1f50d; 在技术的宇宙中&#xff0c;我愿做永不停歇的探索者。 ✨ 用代码丈量世界&…...

java 局域网 rtsp 取流 WebSocket 推送到前端显示 低延迟

众所周知 摄像头取流推流显示前端延迟大 传统方法是服务器取摄像头的rtsp流 然后客户端连服务器 中转多了&#xff0c;延迟一定不小。 假设相机没有专网 公网 1相机自带推流 直接推送到云服务器 然后客户端拉去 2相机只有rtsp &#xff0c;边缘服务器拉流推送到云服务器 …...

SOC-ESP32S3部分:30-I2S音频-麦克风扬声器驱动

飞书文档https://x509p6c8to.feishu.cn/wiki/SKZzwIRH3i7lsckUOlzcuJsdnVf I2S简介 I2S&#xff08;Inter-Integrated Circuit Sound&#xff09;是一种用于传输数字音频数据的通信协议&#xff0c;广泛应用于音频设备中。 ESP32-S3 包含 2 个 I2S 外设&#xff0c;通过配置…...