• 【Vue五分钟】五分钟了解--Vue过渡

    目录

    前言

    一、vue里面的transition组件

    二、transition组件应用CSS过渡

    （1）单元数/组件过渡

    （2）多个元素过渡

    （3）多个组件过渡

    （4）列表过渡

    三、JavaScript钩子

    前言

        我们的vue五分钟系列很长，是一个系列文章博客，每天都把学过的东西都会更新那么一丢丢，大家感兴趣的，可以点赞加关注，我们一起学习，博主只是记录每一部分学到的知识进行总结，不喜勿喷，总结不易，C站有很多相关的vue只是总结，只是看谁记录编写得详细与否！

       好了，我们现在可以了解一下vue的过渡，vue在插入、更新以及移除DOM元素的时候，提供了很多不同方式过渡的效果，如果在css过渡自动应用class，在过渡钩子函数中使用JavaScript直接操作DOM就可以了。

    一、vue里面的transition组件

       Vue提供了这个transition组件，可以使得在v-if条件渲染、v-show条件显示、动态组件的时候可以给到任意元素和组件添加了进入或离开元素过渡。

    二、transition组件应用CSS过渡

       在应用css过渡的时候，transition组件会在恰当的时候添加、删除元素。我们的transition组件包含了一下6类过渡类别；

    • v-enter：定义在进入过渡的时候，元素在插入之前生效，在元素被插入之后的下一帧溢出。
    • v-enter-active：在定义的时候，在过渡生效的状态，在整个进入过渡的阶段中应用，在元素被插入前生效，在过渡完成之后移除。
    • v-enter-to:定义进入过渡的结束状态，在元素被插入之后下一帧生效，过渡完成后移除。
    • v-leave:定义在离开过渡的开始状态，在离开过渡被触发的时候立刻生效，下一帧就会被移出。
    • v-leave-active：在定义离开的过渡生效时状态。
    • v-leave-to:定义在离开过渡的结束状态。

    我们总结的这6个过渡类，前三个是进入过渡的类，后面三个是离开过渡的类，在进入或者离开的过程中，这里6个过渡类之间相互切换。

    （1）单元数/组件过渡

       在transition组件中只会包含一个元素，在这个元素插入或者删除的时候定义过渡。我们可以通过一行代码段进行了解一下：

    实例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <title>动态title>
    5. head>
    6. <body>
    7.     <div id="app">
    8. <input type="checkbox" v-model="guodu" id="game"/>
    9. <label for="game">我已经知晓未成年人游戏时间公告label>
    10. <transition name="fade">
    11.     <p v-if="guodu"><button>开始游戏button>p>
    12. transition>
    13.     div>
    14.     <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    15. <script>
    16.     var vm = new Vue({
    17.         el:"#app",
    18.         data:{guodu:false}
    19.     });
    20. script>
    21.  
    22.  
    23. <style>
    24.     .fade-enter,
    25.     .fade-leave-to {
    26.         opacity: 0;
    27.         transform: translateX(100px);
    28.     }
    29.  
    30.     .fade-enter-active,
    31.     .fade-leave-active {
    32.         transition: all 2s;
    33.     }
    34. style>
    35.  
    36. body>
    37.  
    38.  
    39.  
    40. html>

    运行结果：我们可以看到但单击选中“我已知晓王者未成年人游戏时间公告”的复选框，然后就会在页面上淡出我们的“开始游戏”，但我们在取消勾选的时候，“开始游戏”就会淡出我们的页面。

    因为我们的组件设置了name=“fade” ,然后可以在定义样式的时候用到fade的前缀，如代码中的.fade-enter等等，这样定义好样式以后，就不用进行手动引入了，transition组件就可以将我们“开始游戏”按钮的元素恰到好处的添加以及删除操作。

    （2）多个元素过渡

    transition组件包含多个元素，这一些元素在插入或者删除的时候就可以定义过渡。我们还是通过代码了解一下，不用大肆修改，其他的代码就不用修改了，我们只要在前面的单个元素部分的章节上面进行修改就可以了。

    实例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <title>动态title>
    5. head>
    6. <body>
    7.     <div id="app">
    8. <input type="checkbox" v-model="DGguodu" id="game"/>
    9. <label for="game">我已经知晓未成年人游戏时间公告label>
    10. <transition name="fade" appear mode="out-in">
    11.     <p v-if="DGguodu" key="1"><button>开始游戏button>p>
    12.     <p v-else key="2">先阅读公告后进行游戏p>
    13. transition>
    14.     div>
    15.     <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    16. <script>
    17.     var vm = new Vue({
    18.         el:"#app",
    19.         data:{DGguodu:false}
    20.     });
    21. script>
    22.  
    23.  
    24. <style>
    25.     .fade-enter,
    26.     .fade-leave-to {
    27.         opacity: 0;
    28.         transform: translateX(100px);
    29.     }
    30.  
    31.     .fade-enter-active,
    32.     .fade-leave-active {
    33.         transition: all 2s;
    34.     }
    35. style>
    36.  
    37. body>
    38.  
    39.  
    40.  
    41. html>

    运行结果：

     我们看到上面结果，我们可以理解一下，为什么会出现上面这样的结果呢，因为我们将transition设置成了appear模式属性，这个属性用于设置节点在初始渲染的时候也应用过渡的效果。当我们选择复用框的时候，“先阅读.....”这一段话就会淡出，“开始游戏”就会淡入。这是因为我们给mode设置成了out-in，mode属性用来设置过渡模式。

    （3）多个组件过渡

    多个组件的过渡比多个元素过渡更加的简单，因为他不像元素过渡的时候使用到key属性，只需要使用动态组件即可。我们还是通过实例代码的结果来加深了解一下：

    实例代码：

    （4）列表过渡

       列表过渡使用的是transition-group组件，不同于transition这个组件的是，transition-group这个组件含有更多的属性特性，比如：mode属性不可用、内部只能含有一个key属性、css过渡得嘞将会应用在内部元素、渲染的时候以一个真实的元素呈现。我们通过代码进行了解一下这个列表过渡：

    实例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <title>列表过渡title>
    5. head>
    6. <body>
    7.     <div id="app">
    8.         <h1>2022届大学生新生入学登记：h1>
    9. <form>
    10.     <p><label for="name">姓名：label>
    11.     <input type="text" v-model="stuInfo.name" id="name">p>
    12.     <p><label for="xuehao">学号:label>
    13.     <input type="xuehao" v-model="stuInfo.xuehao" id="xuehao">p>
    14. <p><button @click="add" type="button">添加button>p>
    15. form>
    16.  
    17. <transition-group tag="ul" name="fade">
    18.     <li v-for="(item,index) in students" :key="item.xuehao">{{index+1}}--{{item.name}}--{{item.xuehao}}<button @click="del(index)">删除button>
    19.     li>
    20. transition-group>
    21.     div>
    22.     <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    23. <script>
    24.  
    25.     var vm = new Vue({
    26.         el:"#app",
    27.         data:{
    28.             stuInfo:{xuehao:"  "},
    29.             students:[]
    30.         },
    31.         methods:{
    32.             add(){
    33.                 this.students.push(this.stuInfo);
    34.                 this.stuInfo={};
    35.             },
    36.             del(index){this.students.splice(index,1);}
    37.         }
    38.     });
    39. script>
    40. <style>
    41.     .fade-enter,
    42.     .fade-leave-to {
    43.         opacity: 0;
    44.         transform: translateX(100px);
    45.     }
    46.     .fade-enter-active,
    47.     .fade-leave-active {
    48.         transition: all 2s;
    49.     }
    50. style>
    51. body>
    52. html>

    运行结果：

    我们这里已经将-group的组件设置成了tag='ul' ,这样使得每列表项li元素的key属性值数据中的xuehao的属性值，确保它的属性值是唯一的属性。结果如上，效果就不多说了，大家观看即可。

    三、JavaScript钩子

    JavaScript的钩子函数可以使用transition组件里面的v-on指令绑定，transition过渡的周期可以有以下钩子函数：

    1.  
    2.     <transition v-on:before-enter="beforeEnter"
    3.     v-on:enter="enter"
    4.     v-on:after-enter="afterenter"
    5.     v-on:enter-cancelled="entercanclled"
    6.     v-on:before-leave="beforeLeave"
    7.     v-on:leave="leave"
    8.     v-on:after-leave="afterLeave"
    9.     v-on:leave-cancelled="leaveCancelled"
    10.     >
    11.     transition>

    实例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <title>钩子函数实现动画title>
    5. head>
    6. <body>
    7.     <div id="app">
    8.         
    9.         <input type="checkbox" v-model="already" id="ck"/>
    10.         <label for="ck">我已经阅读了相关的报名需求label>
    11.         <transition 
    12.          @before-enter="beforeEnter"
    13.          @enter="enter"
    14.          @after-enter="after-enter"
    15.         >
    16.     <p class="show" v-if="already"><button>确定报名button>p>transition>
    17.     div>
    18.     <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
    19. <script>
    20.  
    21.     var vm = new Vue({
    22.         el:"#app",
    23.         data:{
    24. already:false
    25.         },
    26.         methods:{
    27.             beforeEnter:function(el){
    28.                 el.style="opacity:0";console.log("beforeEnter");
    29.             },
    30.             enter:function(el,done) {
    31.                 el.offsetHeight;
    32.                 el.style = "opacity:1";
    33.                 console.log("enter");
    34.                 done();
    35.             },
    36.             afterEnter:function(el){
    37.                 console.log("afterEnter");
    38.             }
    39.         }
    40.     });
    41. script>
    42. <style>
    43.     .show {
    44.         transition: all 2s;
    45.     }
    46. style>
    47. body>
    48. html>

    运行结果：

    我们可以看到单击复选框的时候，“确认报名”就会慢慢的显示出啦，而且取消勾选不会淡出！ 

  • 相关阅读:
    PythonOpenCV随机粘贴图像
    虚拟货币（也称为加密货币或数字货币）的运作
    计算机毕业设计Java安全管理系统(源码+系统+mysql数据库+lw文档)
    使用 ORM 与原始 SQL 的性能对比
    【微服务】微服务架构
    八个解决你80%需求的CSS动画库
    【LeetCode】一文吃透差分数组（附例题）
    【论文复现|智能算法改进】基于多策略的改进蜜獾算法及其应用
    这些Java面试题，有点虐人！
    【LeetCode热题100】--55.跳跃游戏
  • 原文地址：https://blog.csdn.net/Lushengshi/article/details/126517661