学习vue3 五,传送,缓存组件以及过渡和过渡列表

目录

Teleport传送组件

keep-alive缓存组件

transition动画组件

 1. 过渡的类名

2. 自定义过渡class名

3. transition的生命周期

4.appear

transition-group

1. 过渡列表

 2. 列表的移动过渡

3. 状态过渡


Teleport传送组件

Teleport Vue 3.0新特性之一。

Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术;类似于 React 的 Portal。

主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下,完全不受父级style样式影响

用法

<teleport to="body"><A><template #[slotSelect]><p>header slot</p></template><template #footer="{data}">{{data}}</template></A>
</teleport>

使用一个teleport标签包裹,并且使用to属性去跳转到想要的dom元素处,也可以使用class或者id选择器

<div class="card"></div>
<teleport to=".card"><A><template #[slotSelect]><p>header slot</p></template><template #footer="{data}">{{data}}</template></A>
</teleport>

keep-alive缓存组件

有时候我们离开这个组件后,不希望组件被重新渲染,那么就可以使用keep-alive

使用后会增加两个生命周期,onActivated和onDeActivated

onMounted之后执行一次

案例:

<script setup lang="ts">
import A from "./components/A.vue";
import B from "./components/B.vue";
import Card from "./components/Card.vue";
import {shallowRef,ref,reactive,markRaw} from "vue";
const comData = reactive([{name:"A",com: markRaw(A)},{name:"B",com: markRaw(B)},{name:"C",com: markRaw(Card)}
])
const com = shallowRef(comData[0].com)
const active = ref(0)
function changeView(index:number){active.value = indexcom.value = comData[index].com
}
</script><template><div class="container"><divv-for="(item,index) in comData" :key="index":class="{'active':active === index}"@click="changeView(index)">{{item.name}}</div></div><keep-alive :exclude="comData[0].name"><component :is="com"></component></keep-alive>
</template><style scoped>
.container {width: 500px;display: flex;justify-content: center;margin: 0 auto;
}
.container div {margin: 10px;cursor: pointer;width: 100px;height: 30px;line-height: 30px;border: 1px solid grey;text-align: center;
}
.active {background-color: skyblue;color: white;
}
</style>

A,B组件都不会被销毁了,而是进行缓存

这个api有三个props

include:要包含哪些组件

exclude:要排除哪些组件

max:最多有多少组件

B组件内

<script setup lang="ts">
import {onMounted,onActivated,onDeactivated} from "vue";
onMounted(() => {console.log("b组件挂载")
})
onActivated(() => {console.log("b组件激活")
})
onDeactivated(() => {console.log("b组件失活")
})
</script><template><div class="context"><h1>我是b组件</h1><div><span>请输入:</span><input type="text" style="width: 300px;height: 35px"/></div></div>
</template><style scoped>
.context {width: 500px;height: 300px;background-color: #ccc;border: 1px solid grey;margin: 0 auto;
}h1 {text-align: center;
}
</style>

执行截图

transition动画组件

vue提供了transition来封装组件,可以对一个组件提供离开或者进入的过渡,对于以下四个都有作用

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

 自定义 transition 过度效果,你需要对transition组件的name属性自定义。并在css中写入对应的样式

 1. 过渡的类名

vue提供了六个类名来完成过渡

v-enter-from:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

v-enter-to:定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除),在过渡/动画完成之后移除。

v-leave-from:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被移除),在过渡/动画完成之后移除。

案例:

和缓存组件代码联用

<transition name="fade"><keep-alive :exclude="comData[0].name"><component :is="com"></component></keep-alive>
</transition>
.fade-enter-active, .fade-leave-active {transition: all 0.5s ease;
}
.fade-enter-from, .fade-leave-to {width: 0px;height: 0px;
}
.fade-enter-to, .fade-leave-from {width: 500px;height: 500px;
}

2. 自定义过渡class名

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class

在这些props后接要自定义的名字即可换成自己想要的,相当于起别名

也可以指定过渡时间

<transition :duration="1000">...</transition>
 可以分别指定,离开和进入的时间 
<transition :duration="{ enter: 500, leave: 800 }">...</transition> 

自定义class只要是可以和css的动画库进行连用

案例:我们以animate.css为例

安装:npm install animate.css -S

引入:在main.ts中 import "animate.css"

 <transitionenter-active-class="animate__animated animate__fadeInLeft"leave-active-class="animate__animated animate__fadeOutLeft"><keep-alive :exclude="comData[0].name"><component :is="com"></component></keep-alive></transition>

3. transition的生命周期

对于transition vue设计了八个生命周期函数,用于使用js来执行一些操作

  @before-enter="beforeEnter" //对应enter-from@enter="enter"//对应enter-active@after-enter="afterEnter"//对应enter-to@enter-cancelled="enterCancelled"//显示过度打断@before-leave="beforeLeave"//对应leave-from@leave="leave"//对应enter-active@after-leave="afterLeave"//对应leave-to@leave-cancelled="leaveCancelled"//离开过度打断

他们都会传入一个参数el:Element

enter和leave会多一个参数,done也就是一个回调,当过渡执行完毕时,会自动调用

4.appear

通过这个属性可以设置初始节点过度 就是页面加载完成就开始动画 对应三个状态

 <transition
    appear

  1. appear-active-class=""

  2. appear-from-class=""

  3. appear-to-class=""

>
    <keep-alive :exclude="comData[0].name">
      <component :is="com"></component>
    </keep-alive>
  </transition>

transition-group

1. 过渡列表

同时渲染整个列表,我们会使用transition-group.组件 

  • 默认情况下,它不会渲染一个包裹元素,但是你可以通过 tag attribute 指定渲染一个元素。
  • (也就是说不使用tag那么就是分散的元素节点没有生成一个父节点包裹)
  • 过渡模式不可用,因为我们不再相互切换特有的元素。
  • 内部元素总是需要提供唯一的 key attribute 值。
  • CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身。

案例:

<script setup lang="ts">
import {reactive} from "vue";
const list = reactive([1,2,3,4,5])
function add() {list.push(list.length + 1)
}
function pop() {list.pop()
}
</script><template><div><div class="anniu"><button @click="add">add</button><button @click="pop">pop</button></div><transition-groupenter-active-class="animate__animated animate__backInDown"leave-active-class="animate__animated animate__backOutDown"tag="div" class="context"><divclass="showList"v-for="(item,index) in list" :key="index">{{item}}</div></transition-group></div>
</template><style scoped>
.anniu {width: 200px;margin: 0 auto;
}
.anniu button {width: 80px;height: 35px;margin-left: 10px;
}
.context {width: 500px;height: 500px;margin: 20px auto;display: flex;flex-wrap: wrap;justify-content: center;border: 1px solid grey;
}
.showList {width: 25px;height: 25px;border: 1px solid grey;text-align: center;margin-top: 5px;
}
</style>

 2. 列表的移动过渡

<transition-group> 组件还有一个特殊之处。除了进入和离开,它还可以为定位的改变添加动画。只需了解新增的 v-move 类就可以使用这个新功能,它会应用在元素改变定位的过程中。像之前的类名一样,它的前缀可以通过 name attribute 来自定义,也可以通过 move-class attribute 手动设置

案例:

<script setup lang="ts">
import {ref} from "vue";
import _ from "lodash"let data = ref(Array.apply(null,{length: 81} as number[]).map((_,index)=> {return {id: index,value: (index % 9) + 1}
}))
function change () {data.value = _.shuffle(data.value)
}
</script><template><div><button @click="change">random</button><transition-group tag="div" name="mmm" class="context"><div v-for="item in data" :key="item.id">{{item.value}}</div></transition-group></div>
</template><style scoped>
.context {display: flex;width: calc(10 * 25px);flex-wrap: wrap;
}
button{width: 100px;height: 35px;font-size: 19px;margin-bottom: 30px;
}
.context div {width: 25px;height: 25px;text-align: center;border: 1px solid grey;
}
.mmm-move {transition: all 1s ease;
}
</style>
map() 的返回值是一个新的数组,新数组中的元素为 “原数组调用函数处理过后的值”

3. 状态过渡

vue也可以给数字颜色等添加过渡

<template><div><input step="20" v-model="num.current" type="number" /><div>{{ num.tweenedNumber.toFixed(0) }}</div></div>
</template><script setup lang='ts'>
import { reactive, watch } from 'vue'
import gsap from 'gsap'
const num = reactive({tweenedNumber: 0,current:0
})watch(()=>num.current, (newVal) => {gsap.to(num, {duration: 1,tweenedNumber: newVal})
})</script><style>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/393739.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring的配置类分为Full和Lite两种模式

Spring的配置类分为Full和Lite两种模式 首先查看 Configuration 注解的源码, 如下所示: Target({ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) Documented Component public interface Configuration {AliasFor(annotation Component.class)String value() defau…

(C23/C++23) 语句末尾的标签

文章目录 &#x1f516;前言&#x1f3f7;️ref&#x1f3f7;️标号 &#x1f516;兼容&#x1f3f7;️23标准前&#x1f3f7;️23标准后&#x1f3f7;️原因 &#x1f516;未兼容&#x1f516;END&#x1f31f;关注我 &#x1f516;前言 &#x1f3f7;️ref C23提案复合语句末…

Serverless 1

一、云原生应用 云原生应用覆盖到&#xff1a; 大数据&#xff0c;人工智能&#xff0c;边缘计算&#xff0c;区块链等 服务代理&#xff1a;envoy API 网关&#xff1a;APISIX 服务网格&#xff1a;Istio 服务发现&#xff1a;CoreDNS 消息和流式处理&#xff1a;kafka Serve…

PDF预览:利用vue3-pdf-app实现前端PDF在线展示

目录 PDF预览&#xff1a;利用vue3-pdf-app实现前端PDF在线展示 一、vue3-pdf-app组件介绍及其优点 1、vue3-pdf-app是什么 2、作用与场景 3、类似的插件 二、项目初始化与依赖安装 1、初始化Vue3项目 2、安装依赖 三、集成vue3-pdf-app插件 1、引入插件 2、配置组件…

ChemLLM化学大模型再升级,AI助力化学研究

ChemLLM 介绍 ChemLLM 系列模型 是由上海人工智能实验室基于InternLM2 开发的首个兼备化学专业能力和对话、推理等通用能力的开源大模型。相比于现有的其他大模型&#xff0c;ChemLLM 对化学空间进行了有效建模&#xff0c;在分子、反应和其他领域相关的化学任务上表现优异。 …

解决戴尔台式电脑休眠后无法唤醒问题

近期发现有少量戴尔的台式机会有休眠后无法唤醒的问题&#xff0c;具体现象就是电脑在休眠后&#xff0c;电源指示灯以呼吸的频率闪烁&#xff0c;无论怎么点鼠标和键盘都没有反应&#xff0c;并且按开机按钮也没法唤醒&#xff0c;只能是长按开机键强制关机再重启才行&#xf…

leetcode 958.二叉树的完全性检验

1.题目要求: 给你一棵二叉树的根节点 root &#xff0c;请你判断这棵树是否是一棵 完全二叉树 。在一棵 完全二叉树 中&#xff0c;除了最后一层外&#xff0c;所有层都被完全填满&#xff0c;并且最后一层中的所有节点都尽可能靠左。最后一层&#xff08;第 h 层&#xff09;…

YOLOv8改进 | 主干网络 | 将backbone替换为MobileNetV4【小白必备教程+附完整代码】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv8改进有效…

Linux PCI和PCIe总线

1 PCIe中断 - PCI/PCIe设备中断都是level触发&#xff0c;并且请求信号为低电平有效 - PCI总线一般只有INTA#到INTD#的4个中断引脚&#xff0c;所以PCI多功能设备的func一般不会超过4个&#xff0c;但是共享中断除外 2 IOMMU 2.1 ARM SMMU v2 Refer to my blog ARM SMMU v2. 2.…

【机器学习】重塑游戏世界:机器学习如何赋能游戏创新与体验升级

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀目录 &#x1f50d;1. 引言&#xff1a;游戏世界的变革前夜&#x1f4d2;2. 机器学习驱动的游戏创新&#x1f31e;智能化游戏设计与开发&…

OJ-0807

题目 参考 import java.util.ArrayList; import java.util.List; import java.util.Objects; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner in new Scanner(System.in);String input in.nextLine();String[] numStrs inp…

身体出现这5种异常,可能是甲状腺在求救,千万别扛着!

甲状腺&#xff0c;被誉为人体新陈代谢的“发动机”&#xff0c;是调节我们身体能量和代谢的重要器官。然而&#xff0c;当甲状腺出现问题时&#xff0c;它往往会通过身体的一些异常信号向我们求救。北京精诚博爱医院张维一主任提醒&#xff1a;以下是五种常见的甲状腺异常表现…

您知道Jmeter中Redirect Automatically 和 Follow Redirects的使用场景吗?

相信很多使用过jmeter的同学都没有关注过请求中的Redirect Automatically 和 Follow Redirects选项&#xff0c;如下图&#xff1a; 在 JMeter 中&#xff0c;Redirect Automatically 和 Follow Redirects 是与 HTTP 请求重定向相关的两个选项&#xff0c;它们之间是有很大区别…

速度规划之:起点速度和终点速度不为零的非对称梯形速度规划

起点速度和终点速度不为零的非对称梯形速度规划 一、引言二、理论基础1. 梯形速度规划概述2.数学建模- 变量定义- 约束关系- 公式推导 三、计算过程1.只存在减速段2.只存在加速段3.存在加速段和减速段4.存在加速度段、匀速段和减速段 四、仿真实现五、优缺点优点缺点 六、总结 …

亚马逊等跨境电商平台怎么找到好的测评资源?

如何找到好的测评资源呢&#xff1f; 目前常规卖家找测评资源主要通过以下途径&#xff1a; 联系自己在海外的亲友帮忙测评&#xff0c;不过海外的亲友会比较有限安排业务员在facebook等社交平台找老外测评&#xff0c;但社交平台找老外很难掌控留评时效&#xff0c;甚至会遇…

破解USB设备通讯协议实现自定义软件控制的步骤与方法

在设备和计算机之间通过USB进行通讯的情况下&#xff0c;厂家提供的软件可以控制设备&#xff0c;但没有提供任何其他资料和支持&#xff0c;这种情况下&#xff0c;若希望自行开发软件来实现同样的功能&#xff0c;可以通过以下步骤破解通讯协议并开发自定义程序。 1. 捕获US…

2-57 基于matlab 实现了气缸的充气和放气的仿真

基于matlab 实现了气缸的充气和放气的仿真&#xff0c;在等温情况和绝热两种情况下分别进行了仿真&#xff0c;并给多变过程下的理论计算公式。程序已调通&#xff0c;可直接运行。 2-57 matlab 气缸充气和放气仿真 - 小红书 (xiaohongshu.com)

【论文阅读】PETRv2: A Unified Framework for 3D Perception from Multi-Camera Images

Q: 论文如何解决这个问题&#xff1f; A: 论文通过提出PETRv2框架来解决多相机图像的3D感知问题&#xff0c;具体方法包括以下几个关键点&#xff1a; 时间建模&#xff08;Temporal Modeling&#xff09;&#xff1a; 通过3D坐标对齐&#xff08;3D Coordinates Alignment&…

ASP.Net Core设置接口根路径的方法

使用asp.net core开发微服务项目&#xff0c;需要给每个服务设置不同的根路径&#xff0c;这样既能使用网关转发请求&#xff0c;又方便对单个服务进行测试&#xff0c;保证请求路径的统一。 设置方法需要使用中间件&#xff0c;在Program.cs添加如下代码 app.UsePathBase(&qu…

通过ZRender画一个大屏的顶部样式标题

介绍&#xff1a;通过ZRender画一个大屏项目的顶部样式&#xff0c;在其中放入大屏的标题。ZRender 是二维绘图引擎&#xff0c;它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。 一、下载 npm install zrender终端输入以上命令下载包即可。 二、导…