Vue transition过渡组件详解

2024-09-27 23:11:16

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

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态</title>
</head>
<body>
    <div id="app">
<input type="checkbox" v-model="guodu" id="game"/>
<label for="game">我已经知晓未成年人游戏时间公告</label>
<transition name="fade">
    <p v-if="guodu"><button>开始游戏</button></p>
</transition>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{guodu:false}
    });
</script>
<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
</style>
</body>
</html>

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

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

（2）多个元素过渡

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

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态</title>
</head>
<body>
    <div id="app">
<input type="checkbox" v-model="DGguodu" id="game"/>
<label for="game">我已经知晓未成年人游戏时间公告</label>
<transition name="fade" appear mode="out-in">
    <p v-if="DGguodu" key="1"><button>开始游戏</button></p>
    <p v-else key="2">先阅读公告后进行游戏</p>
</transition>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{DGguodu:false}
    });
</script>
<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
</style>
</body>
</html>

运行结果：

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

（3）多个组件过渡

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

实例代码：

（4）列表过渡

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

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>列表过渡</title>
</head>
<body>
    <div id="app">
        <h1>2022届大学生新生入学登记：</h1>
<form>
    <p><label for="name">姓名：</label>
    <input type="text" v-model="stuInfo.name" id="name"></p>
    <p><label for="xuehao">学号:</label>
    <input type="xuehao" v-model="stuInfo.xuehao" id="xuehao"></p>
<p><button @click="add" type="button">添加</button></p>
</form>
<transition-group tag="ul" name="fade">
    <li v-for="(item,index) in students" :key="item.xuehao">{{index+1}}--{{item.name}}--{{item.xuehao}}<button @click="del(index)">删除</button>
    </li>
</transition-group>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            stuInfo:{xuehao:"  "},
            students:[]
        },
        methods:{
            add(){
                this.students.push(this.stuInfo);
                this.stuInfo={};
            },
            del(index){this.students.splice(index,1);}
        }
    });
</script>
<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
        transform: translateX(100px);
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: all 2s;
    }
</style>
</body>
</html>

运行结果：

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

三、JavaScript钩子

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

    <transition v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterenter"
    v-on:enter-cancelled="entercanclled"
    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
    v-on:leave-cancelled="leaveCancelled"
    >
    </transition>

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>钩子函数实现动画</title>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="already" id="ck"/>
        <label for="ck">我已经阅读了相关的报名需求</label>
        <transition
         @before-enter="beforeEnter"
         @enter="enter"
         @after-enter="after-enter"
        >
    <p class="show" v-if="already"><button>确定报名</button></p></transition>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
already:false
        },
        methods:{
            beforeEnter:function(el){
                el.style="opacity:0";console.log("beforeEnter");
            },
            enter:function(el,done) {
                el.offsetHeight;
                el.style = "opacity:1";
                console.log("enter");
                done();
            },
            afterEnter:function(el){
                console.log("afterEnter");
            }
        }
    });
</script>
<style>
    .show {
        transition: all 2s;
    }
</style>
</body>
</html>

运行结果：

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

到此这篇关于Vue transition过渡组件详解的文章就介绍到这了,更多相关Vue transition内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue使用transition组件动画效果的实例代码

transition文档地址定义一个背景弹出层实现淡入淡出效果 <template> <div> <button @click="show = !show"> Toggle </button> <transition name="fadeBg"> <div class="bg" v-if="show">hello</div> </tra
Vue学习笔记进阶篇之单元素过度

概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 单元素/组件的过度 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡条
Vue中transition标签的基本使用教程

目录 transition 标签配合 animation 配合 transition transition-group 标签动画库 animate.css 总结 transition 标签 transition 标签:Vue 的内置动画标签作用:在 [插入] / [更新] / [移除] DOM 元素时,在合适的时候给元素添加样式类名(配合 CSS 样式使用,实现动画效果) 注意事项 transition 标签只能包含 1 个元素:如果里面写了多个元素,则只生效第一个 transition
详解Vue中过度动画效果应用

一.实现动画过渡效果的几种方式实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name="fade"></transition> 1.v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. 2.v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效,在 transition/animation 完成之后移除. 3.v-lea
vue中transition组件在项目中运用小结

vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果.transition组件的动画效果过渡设置基于css的transition属性设置.下面给大家介绍下vue中transition组件在项目中运用. 单个弹入弹出运用注意: name的名字为多少,则下面的样式class开头就要为多少通过v-if来配合执行动画效果 <template> <div> <button v-on:click="show =
详解vue过度效果与动画transition使用示例

目录 transition钩子函数自定义过渡类名 transition-group使用小结先看一个示例代码如下 <template> <div align="center" style="margin-top: 100px;"> <button @click="show= !show" >测试</button> <transition> <div v-if="sh
深入理解Vue的过度与动画

1.在插入.更新.移除DOM元素时,在合适的时候给元素添加样式类名 2.元素有一个进入过程:Enter,一个离开过程Leave. 两个过程都有一个初始态()和终止态(-to)和两态之间的过度效果(activate) 3.写法动画:写好v-enter-active(替换come这个名字)和v-leave-active(替换go)(这两个是vue的工作)和动画atguigu(这个是css3的效果).再用<transition>把动画元素包起来就行.appear是让元素一加载就执行一次v-ente
Vue transition实现点赞动画效果的示例

目录效果一览爱心效果数字滚动动画点赞动画效果一览爱心效果材料:爱心图标两个,没有我这种 icon 组件的用 png 图片代替 <transition :name=" isLike ? 'zoom' : '' " mode="out-in">  <icon data="@icon/like.svg" color="#FF0000" v-if="isL
Vue transition过渡组件详解

目录一.vue里面的transition组件二.transition组件应用CSS过渡 (1)单元数/组件过渡 (2)多个元素过渡 (3)多个组件过渡 (4)列表过渡三.JavaScript钩子一.vue里面的transition组件 Vue提供了这个transition组件,可以使得在v-if条件渲染.v-show条件显示.动态组件的时候可以给到任意元素和组件添加了进入或离开元素过渡. 二.transition组件应用CSS过渡在应用css过渡的时候,transition组件会在恰当
基于Vue单文件组件详解

本文将详细介绍Vue单文件组件概述在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon
vue.js 动态组件详解

:is 动态组件使用 v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: <div id="app"> <test v-bind:is="which_to_show"></test> </div> <script> var demo = new Vue({ el: "#app", data: { which_to_show: "f
Vue实现PopupWindow组件详解

这段时间一直在学习前端技术来完成自己的小项目.在js方面就使用了Vue框架.由于在项目里想实现一个新建地址的PopupWindow效果,便想到可以使用Vue的一些特性来实现. 用到的Vue特性:组件(Component),props传值,slot内容插入,transitions过渡动画,x-templete模板. 直接上代码(完整代码可在链接中下载popupwindow): html代码(无样式): <div id="address-choose"> <div>
vue components 动态组件详解

目录总结总结数组发生变化时,动态加载相应数据场景:点击不同组件名称,界面显示相应组件步骤一:导入所需组件步骤二:点击 tab 选项卡,将对应组件名添加进数组步骤三:使用动态组件,:is 属性绑定组件名 <div v-for="(item, index) in componentData" :key="index"> <components :is="item.componentName"/> </div
vue设计一个倒计时秒杀的组件详解

简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路: 1.时间不能是本地客户端的时间必须是服务器的时间这里用一个settimeout代替以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束, 4.在更新时间的函数中是
vue组件详解之使用slot分发内容

一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot , 这个过程叫作内容分发( transclusion ). 注意两点: 1.< app>组件不知道它的挂载点会有什么内容.挂载点的内容是由<app >
Vue.js之mixins混合组件详解

混合以一种灵活的方式为组件提供分布复用功能.混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被"混入"组件自己的选项中. 一.Mixins的基本用法现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <div id="app"> <p>num:{{ num }}</p> <P><but
vue封装一个弹幕组件详解

目录前言功能实现 1.获取随机颜色随机数生成随机颜色编码生成 2.随机生成弹幕出现的高度坐标 3.格式化弹幕对象颜色定位 4.创建弹幕对象滚动动画定义创建弹幕dom对象实例弹幕销毁弹幕循环 5.实时弹幕发送 html JavaScript 源码地址前言现在很多地方都有使用到弹幕,最近在捣鼓自己的个人博客网站,也想着在里面加入一个弹幕模块,所以在这里封装了一个可复用的弹幕组件,目前已经实现了基本的功能,可能还会有存在缺陷,后续会继续优化.这里给大家介绍分享一下实现的过程.
Vue 2阅读理解之initRender与callHook组件详解

目录 initRender 组件渲染初始化 callHook('beforeCreate') initRender 组件渲染初始化在 initEvents 事件系统初始化完成之后,紧接着的就是组件实例的渲染部分的初始化 initRender. initRender 函数定义位于 src/core/instance/render.ts 文件内,基本定义如下: export function initRender(vm: Component) { vm._vnode = null vm._stat