• 学习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属性去跳转到想要的dom元素处，也可以使用class或者id选择器

    keep-alive缓存组件

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

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

    onMounted之后执行一次

    案例：

    1. <script setup lang="ts">
    2. import A from "./components/A.vue";
    3. import B from "./components/B.vue";
    4. import Card from "./components/Card.vue";
    5. import {shallowRef,ref,reactive,markRaw} from "vue";
    6. const comData = reactive([
    7.   {
    8.     name:"A",
    9.     com: markRaw(A)
    10.   },
    11.   {
    12.     name:"B",
    13.     com: markRaw(B)
    14.   },
    15.   {
    16.     name:"C",
    17.     com: markRaw(Card)
    18.   }
    19. ])
    20. const com = shallowRef(comData[0].com)
    21. const active = ref(0)
    22. function changeView(index:number){
    23.   active.value = index
    24.   com.value = comData[index].com
    25. }
    26. </script>
    27.  
    28. <template>
    29.   <div class="container">
    30.     <div
    31.         v-for="(item,index) in comData" :key="index"
    32.         :class="{'active':active === index}"
    33.         @click="changeView(index)">
    34.       {{item.name}}
    35.     </div>
    36.   </div>
    37.   <keep-alive :exclude="comData[0].name">
    38.     <component :is="com"></component>
    39.   </keep-alive>
    40. </template>
    41.  
    42. <style scoped>
    43. .container {
    44.   width: 500px;
    45.   display: flex;
    46.   justify-content: center;
    47.   margin: 0 auto;
    48. }
    49. .container div {
    50.   margin: 10px;
    51.   cursor: pointer;
    52.   width: 100px;
    53.   height: 30px;
    54.   line-height: 30px;
    55.   border: 1px solid grey;
    56.   text-align: center;
    57. }
    58. .active {
    59.   background-color: skyblue;
    60.   color: white;
    61. }
    62. </style>

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

    这个api有三个props

    include：要包含哪些组件

    exclude：要排除哪些组件

    max：最多有多少组件

    B组件内

    1. <script setup lang="ts">
    2. import {onMounted,onActivated,onDeactivated} from "vue";
    3. onMounted(() => {
    4.   console.log("b组件挂载")
    5. })
    6. onActivated(() => {
    7.   console.log("b组件激活")
    8. })
    9. onDeactivated(() => {
    10.     console.log("b组件失活")
    11. })
    12. </script>
    13.  
    14. <template>
    15.   <div class="context">
    16.     <h1>我是b组件</h1>
    17.     <div>
    18.       <span>请输入：</span>
    19.       <input type="text" style="width: 300px;height: 35px"/>
    20.     </div>
    21.   </div>
    22. </template>
    23.  
    24. <style scoped>
    25. .context {
    26.   width: 500px;
    27.   height: 300px;
    28.   background-color: #ccc;
    29.   border: 1px solid grey;
    30.   margin: 0 auto;
    31. }
    32.  h1 {
    33.   text-align: center;
    34. }
    35. </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 被移除)，在过渡/动画完成之后移除。

    案例：

    和缓存组件代码联用

    
  
    
  

    .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后接要自定义的名字即可换成自己想要的，相当于起别名

    也可以指定过渡时间

    ...
     可以分别指定，离开和进入的时间 
    ... 

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

    案例：我们以animate.css为例

    安装：npm install animate.css -S

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

    1.  <transition
    2.     enter-active-class="animate__animated animate__fadeInLeft"
    3.     leave-active-class="animate__animated animate__fadeOutLeft">
    4.     <keep-alive :exclude="comData[0].name">
    5.       <component :is="com"></component>
    6.     </keep-alive>
    7.   </transition>

    3. transition的生命周期

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

    1.   @before-enter="beforeEnter" //对应enter-from
    2.   @enter="enter"//对应enter-active
    3.   @after-enter="afterEnter"//对应enter-to
    4.   @enter-cancelled="enterCancelled"//显示过度打断
    5.   @before-leave="beforeLeave"//对应leave-from
    6.   @leave="leave"//对应enter-active
    7.   @after-leave="afterLeave"//对应leave-to
    8.   @leave-cancelled="leaveCancelled"//离开过度打断

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

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

    4.appear

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

          appear

    1. appear-active-class=""

    2. appear-from-class=""

    3. appear-to-class=""

    >
       
         
       
     

    transition-group

    1. 过渡列表

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

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

    案例：

    2.  
    3. <template>
    4.   <div>
    5.     <div class="anniu">
    6.       <button @click="add">addbutton>
    7.       <button @click="pop">popbutton>
    8.     div>
    9.     <transition-group
    10.         enter-active-class="animate__animated animate__backInDown"
    11.         leave-active-class="animate__animated animate__backOutDown"
    12.         tag="div" class="context">
    13.       <div
    14.           class="showList"
    15.           v-for="(item,index) in list" :key="index">
    16.         {{item}}
    17.       div>
    18.     transition-group>
    19.   div>
    20. template>
    21.  
    22. <style scoped>
    23. .anniu {
    24.   width: 200px;
    25.   margin: 0 auto;
    26. }
    27. .anniu button {
    28.   width: 80px;
    29.   height: 35px;
    30.   margin-left: 10px;
    31. }
    32. .context {
    33.   width: 500px;
    34.   height: 500px;
    35.   margin: 20px auto;
    36.   display: flex;
    37.   flex-wrap: wrap;
    38.   justify-content: center;
    39.   border: 1px solid grey;
    40. }
    41. .showList {
    42.   width: 25px;
    43.   height: 25px;
    44.   border: 1px solid grey;
    45.   text-align: center;
    46.   margin-top: 5px;
    47. }
    48. style>

     2. 列表的移动过渡

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

    案例：

    2.  
    3. <template>
    4.   <div>
    5.     <button @click="change">randombutton>
    6.     <transition-group tag="div" name="mmm" class="context">
    7.       <div v-for="item in data" :key="item.id">
    8.         {{item.value}}
    9.       div>
    10.     transition-group>
    11.   div>
    12. template>
    13.  
    14. <style scoped>
    15. .context {
    16.   display: flex;
    17.   width: calc(10 * 25px);
    18.   flex-wrap: wrap;
    19. }
    20. button{
    21.   width: 100px;
    22.   height: 35px;
    23.   font-size: 19px;
    24.   margin-bottom: 30px;
    25. }
    26. .context div {
    27.   width: 25px;
    28.   height: 25px;
    29.   text-align: center;
    30.   border: 1px solid grey;
    31. }
    32. .mmm-move {
    33.   transition: all 1s ease;
    34. }
    35. style>
    map() 的返回值是一个新的数组，新数组中的元素为 “原数组调用函数处理过后的值”

    3. 状态过渡

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

    2.     
    3. <script setup lang='ts'>
    4. import { reactive, watch } from 'vue'
    5. import gsap from 'gsap'
    6. const num = reactive({
    7.     tweenedNumber: 0,
    8.     current:0
    9. })
    10.  
    11. watch(()=>num.current, (newVal) => {
    12.     gsap.to(num, {
    13.         duration: 1,
    14.         tweenedNumber: newVal
    15.     })
    16. })
    17.  
    18. script>
    19.     
    20. <style>
    21. style>

  • 相关阅读:
    经典算法题 -- 水仙花数
    单例模式~
    基于 Servlet 的博客系统
    synchronized 实现原理
    图的初识·遍历
    记录PyTorch中半精度amp训练出现Nan的排查过程
    GO语言 类型断言type
    【数据结构】树与二叉树（五）：二叉树的顺序存储（初始化，插入结点，获取父节点、左右子节点等）
    qt 判断文件是否存在
    node.js -- 身份认证
  • 原文地址：https://blog.csdn.net/tian_liang_jia/article/details/140944758