Vue实列之过渡和动画，标签过渡，多组件过渡，列表过渡

最新推荐文章于 2022-09-22 22:55:34 发布
最新推荐文章于 2022-09-22 22:55:34 发布
阅读量1.5k 收藏 8
点赞数 4
分类专栏： Vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44761243/article/details/109397691
版权

文章目录

过渡和动画

过渡和动画的概念

过渡：顾名思义，从一个状态向另外一个状态的过程，新的状态替换了旧的状态。不懂你就理解字面的意思，过渡就完事了。。。
动画： 就是比过渡功能更多更强大一点，实在懒得解释了，往后看吧~ 💭😭👍

transition 组件

过渡类型说明
v-enter进入过渡的开始状态，作用于开始的一帧
v-enter-active进入过渡生效时的状态，作用整个过程
v-enter-to进入过渡的结束状态，作用于结束的一帧
v-leave离开过渡的开始状态，作用于开始的一帧
v-leave-active离开过渡生效时的状态，作用于整个过程
v-leave-to离开过渡的结束状态，作用于结束的一帧
<style>
    .chart{
        width: 200px;
        height: 50px;
        background-color: hotpink;
    }
    /* 进入和离开的整个过程*/
    .box-enter-active,.box-leave-active{
        transition: width 3s;
    }
    /*进入初始状态和离开的结束状态*/
    .box-enter,.box-leave-to{
        width: 0px;
    }
    /*进入的结束状态和离开的开始状态*/
    .box-enter-to,.box-leave{
        width: 200px;
    }
</style>
<body>
    <div id="app">
        <button  @click='toggle'>改变图形宽度 yzx</button>
        <hr/> <!--水平线，为了好看一点，可以不写-->
        <transition name="box">
            <!--设置添加过渡的div 标签-->
            <div class="chart" v-if='show'></div>
        </transition>
    </div>  
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods:{
            toggle(){
                this.show = ! this.show;
            }
        }
    })
</script>
</body>

在这里插入图片描述

自定义类名

Vue 中 transition 组件可以使用自定义的类名。
进入：enter-class,enter-active-class,enter-to-class
离开：leave-class,leave-active-class,leave-to-class
animate.css 是一个跨浏览器的 CSS 动画库，内置了很多经典 CSS3 动画。
需要写个link : “ < link href=“https://unpkg.com/animate.css@3.5.2/animate.min.css” rel=“stylesheet”/>”

<div id='app'>
    <button @click="show=!show">显示和隐藏</button>

    <transition appear appear-active-class="animated swing"
    enter-active-class="animated bounceInLeft" leave-active-class="animated bunceOutLeft">
        <p v-if="show">过渡文字效果 yzx </p>
    </transition>
</div> 
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            show:true
        }
    })
</script>

在这里插入图片描述

@keyframes 创建 CSS 动画

@keyframes 规则创建动画，就是将一套 CSS 样式逐步演变成另一种样式，在创建动画的过程中可以多次改变 CSS 样式，通过百分比或关键词 from 和 to (等价于 0% 和 100%)来规定动画的状态。

    <style>
        div.circular{
            width: 100px;
            height: 100px;
            background-color:blueviolet;
            margin-top: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            color: #fff;
        }
        .bounce-enter-active{
            animation: Anim 3s;
        }
        .bounce-leave-active{
            animation: Anim 3s reverse;
        }
        @keyframes Anim{
            0%{
                transform: scale(0);
                background:blueviolet;
            }
            100%{
                transform: scale(1);
                background: red;
            }
        }
    </style>  
</head>
<body>
    <div id="app">
        <button @click="show=!show">使用@keyframes 创建 CSS yzx</button>
        <transition  name="bounce" >
            <div class="circular" v-if="show">圆形啊</div>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                show:true
            }
        })
    </script>
</body>

有点抱歉，显示效果背景有点小bug ,好像是浏览器渲染问题吧，评论区求个答案，我找半天没搞好，抱歉😣😣😣
在这里插入图片描述

多个元素过渡

不同标签元素过渡

不同标签元素可以使用 v-if 和 v- else 进行过渡

<div id="app">
    <transition>
    <ul v-if="items.length >0">
        <li>yzx 01</li>
        <li>yzx 02</li>
    </ul>
    <p v-else>抱歉，没有找到哦~</p>
    </transition>
</div>  
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            items:[]
        }
    })
</script>

在这里插入图片描述

相同标签元素过渡

当有相同标签的元素切换时，需要通过 key 特性设置唯一值来标记。

    <div id="app">
        <button @click="saving=!saving">切换编辑或保存yzx</button>
        <transition >
            <button v-if="saving" key="save">保存</button>
            <button v-else key="edit"> 编辑</button>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                saving: true
            }
        })
    </script>

在这里插入图片描述

过渡模式

过渡模式原理，设置有序的过渡而不是同数发生过渡，在transition 中加入 mode 属性，该属性有以下两个值：
in-out:表示新元素先进性过渡，完成之后当前元素过渡离开
out-in:表示当前元素先进行过渡，完成之后新元素过渡进入

	<style>
		.fade-enter,.fade-leave-to{
			opacity: 0;
		}
		.fade-enter-active,.fade-leave-active{
			transition: opacity .5s;
		}
	</style>
-------------------------------------------------
<body>
<div id="app">
	<transition name="fade" mode="out-in">
	  <button  :key="isOff" @click="isOff=!isOff">{{isOff? 'Off': 'On'}}</button>
	</transition>
</div>	
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			isOff:false
			}
	})
</script>
</body>

在这里插入图片描述

多个组件过渡

多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过 Vue 中, < component>元素绑定 is 元素来实现多组件的过渡。

	<style>
		.fade-enter,.fade-leave-to{
			opacity: 0;
		}
		.fade-enter-active,.fade-leave-active{
			transition: opacity .5s ease;
		}
	</style>
--------------------------------------------------------------------
<body>
<template id='example1'><span>我是登录组件</span></template>
<template id='example2'><span>我是注册组件</span></template>
<div id="app">
<a href="javascript:;" @click="compontentName='example1'">登录 yzx</a>
<a href="javascript:;" @click="compontentName='example2'">注册 yzx</a>
<transition name="fade" mode="in-out">
	<component :is="compontentName"></component> <!--绑定 is 属性-->
</transition>
</div>	
<script>
	Vue.component('example1',{
	   template:'#example1'
	})
	Vue.component('example2',{
	   template:'#example2'
	})
	var vm = new Vue({
		el:'#app',
		data:{
			compontentName:''
		}
	})
</script>

点注册时，登录组件先进来再出去，in-out ,注意观察效果理解。
在这里插入图片描述

列表过渡

写一个列表的进入和离开过渡：

	<style>
		.list-item {
			display: inline-block;
			margin-right: 20px;
			background-color:hotpink;
			border-radius: 50%;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			color: #fff;
		}
		.list-enter-active,.list-leave-active{
			transition: all 1s;
		}
		.list-enter,.list-leave-to{
			opacity: 0;
			transform: translateY(30px);
		}
	</style>
------------------------------
<body>
<div id="app">
   <button @click="add">随机插入一个数字</button>
   <button @click="remove">随机移除一个数字</button>
   <transition-group name="list" tag="p">
	<span v-for="item in items" :key="item" class="list-item">{{item}}</span>
   </transition-group> 
</div>
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			items:[1,2,3,4,5],
			netNum:6
		},
		methods:{
			randomindex(){
				return Math.floor(Math.random()*this.items.length)
			},
			add(){
				this.items.splice(this.randomindex(),0,this.netNum++)
			},
			remove(){
                this.items.splice(this.randomindex(),1)
			}
		}		
	})
</script>

在这里插入图片描述
上述的代码有些许生硬，所以我们加一行代码，让过渡变得自然一点:

.list-move{
			transition: transform 1s;
		}

在这里插入图片描述

列表的排序过渡

Vue使用了FLIP简单动画队列来实现排序过渡，所以即使没有插入或者移除元素，对于元素顺序的变化也支持过渡动画。FLIP动画能提高动画的流畅度，可以解决动画的卡顿、闪烁等不流畅的现象，它不仅可以实现单列过渡，也可以实现多维网格的过渡。FLIP代表First、Last、lnvert、Play。
这是lodash.js 的链接：
< script src=“https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js”>< /script>
实现一个 随机排序的效果：

<body>
    <style>
		.list-item {
			display: inline-block;
			margin-right: 20px;
			background-color:hotpink;
			border-radius: 50%;
			width: 30px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			color: #fff;
		}
		.list-move{
			transition: transform 1s;
		}
	</style>
------------------------------------------------------------
<body>
<div id="app">
   <button @click="shuffle"> 点击随机排序 yzx</button>
   <transition-group name="list" tag="p">
	<span v-for="item in items" :key="item" class="list-item">{{item}}</span>
   </transition-group>
</div>
<script>
	var vm = new Vue({
		el:"#app",
		data:{
			items:[1,2,3,4,5]
		},
		methods:{
            shuffle(){
                //shuffle 会对数组重新排序
                this.items = _.shuffle(this.items);
            }
        }
	})
</script>

在这里插入图片描述

列表的交错过渡

在Vue中可以实现列表的交错过渡效果，它是通过data属性与JavaScript通信来实现的。接下来我们通过案例来讲解如何使用钩子函数结合Velocity.js库实现搜索功能，根据关键字来筛选出符合要求的列表数据，并添加过渡效果。
< script src=“https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js”></ script>
先说抱歉，有点小问题，就是你输入仙女可以查到，你删掉女，然后显示就有点报错了，应该跟我这个链接文件有点关系吧，正常查没有问题的。

<script>
    var vm =  new Vue({
        el:"#app",
        data(){
          return {
              query:'',
              items:[{
                  msg:'仙女'
              },{
                  msg:'仙气飘飘'
              },{
                  msg:'可可爱爱'
              },{
                  msg:'没有脑袋'
              },{
                  msg:'仙女本人'
              }
              ]
          }
        },
        computed:{
            resultList(){
            //根据用户输入的内容，查询 items
            var query = this.query;
            var items = this.items;
            return items.filter(function(item){
                return item.msg.indexOf(query) !== -1;
            })
            }
        },
        returnList(){
            //根据用户输入的内容，查询 items
            var query = this.query;
            var items = this.items;
            return items.filter(function(item){
                return item.msg.indexOf(query) !== -1;
            })
        
        },
        methods:{
            beforeEnter(el){
                el.style.opactity = 0
                el.style.height = 0
            },
            enter(el,done){
                //交错过渡,每个 li 都有延迟
                var deplay = el.dataset.index *150;
                setTimeout(function(){
                    Velocity(el,{
                        opactity:1,
                        height:'1.6em'
                    },{
                        complete:done
                        });
                })
            },
            leave(el,done){
                var deplay = el.dataset.index *150;
                setTimeout(function(){
                    Velocity(el,{
                        opactity:0,
                        height:0
                    },{
                        complete:done
                        });
                })
            }
        }
    })
</script>
未经允许，禁止转载 ~ 今天就先这样吧，实在太困啦，后面没写的会补充的，仙女也是要睡觉觉的🤦‍♀️
大可爱学编程ฅ´ω`ฅ
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue运用transition实现过渡动画
10-17
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧
第四章 Vue过渡和动画
qq_51580006的博客
11-19 1315
随便写的
多组件过渡
tangtian_yes的博客
04-03 605
多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过Vue中的<component>元素绑定is属性来实现多组件的过渡。 过渡样式 组件过渡 实现效果
在Vue中实现简单的过渡与动画
weixin_45204443的博客
04-17 773
关于在Vue中实现过渡与动画的相关定义： Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用v-if) 条件展示 (使用v-show) 动态组件 组件根节点 当插入或删除包含在transition组件中的元素时，Vue 将会做以下处理： 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。 如果过渡组件提供了JavaScript 钩子函数，这些钩子函数...
vue总结04--transition过渡动画
weixin_43737355的博客
10-15 303
vue过渡动画 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 文章目录vue过渡动画css过渡动画一、使用步骤二、简单例子三.动画过渡过程四.使用css动画库五.使用钩子函数六.列表过渡 css过渡动画 transition组件会为嵌套元素自动添加class，可用于做css过度动画 一、使用步骤
简单学会使用Vue2中的列表过渡和状态过渡效果
张浔CSDN
05-14 1072
懂的都懂前言列表过渡1. 介绍2. 案例3. 扩展案例状态过渡1. 介绍2. 案例总结 作者：张浔 阅读本篇文章大概耗时3分钟 前言 小伙伴们好啊，我是张浔。 首先感谢来阅读我的文章，今天呢，给大家聊一聊列表过渡和状态过渡，看文字好像理解了又不是很理解，到底是什么意思呢？别急，我慢慢介绍给你认识。 如果你是对 Vue2 一点都不懂的，建议先阅读完我前两篇文章 《教你用Vue2如何做过渡&动画效果+著名动画库》、《学一学在Vue2中实现过渡&动画的初始渲染和多个元素and组件过渡的效果》
Vue过渡与动画
weixin_53919192的博客
09-22 1915
本文为大家介绍了Vue过渡与动画，希望对你有帮助
教你用Vue如何实现过渡&动画效果
EX1332914934的博客
05-10 6868
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果 Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单例子 <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="
Vue3过渡&动画：列表的过渡及例子
米儿的博客
07-09 1259
目前为止，过渡动画我们只要是针对单个元素或者组件的： 要么是单个节点； 要么是同一时间渲染多个节点中的一个； 那么如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行呢？ 这个时候我们要使用 <transition-group> 组件来完成； 使用<transition-group> 有如下的特点： 默认情况下，它不会渲染一个元素的包裹器，但是你可以指定一个元素并以 tag attr...
vue编写的table
12-03
vue开发的前端table示范案例，主要使用了vue.js和Element UI
vue中组件的过渡动画及实现代码
10-17
主要介绍了vue中组件的过渡动画，并通过实例代码给大家介绍了过渡动画的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现列表滚动的过渡动画
10-15
主要为大家详细介绍了vue实现列表滚动的过渡动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue 过渡（动画）transition组件案例详解
08-31
主要介绍了Vue 过渡（动画）transition组件案例详解，非常不错，具有参考借鉴价值，需要的朋友参考下
Vue 解决路由过渡动画抖动问题(实例详解)
10-15
主要介绍了Vue 解决路由过渡动画抖动问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
18.Vue过渡&动画：transition
高新园养鸡场
09-08 844
简介 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡： 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点   过渡类名 在进入的过渡中，会有 3 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以
vue.js，table标签(表格)使用过度transition组件出错
一杯苦恰啡的博客
12-15 3316
table标签在vue之中可能比较特殊吧~，table标签里面的transition的用法和在table标签中套组件有点相似。 解决办法：<style> .list-enter-active { transition: all .3s ease; } .list-leave-active { transition: all .8s cubic-bez
Vue ＜transition-group＞ table滚动显示数据 过渡效果案例(vue.js版)
zbailing的博客
03-04 599
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue <transition-group> table滚动显示数据 过渡效果案例</title> <style> .list-complete-item { transition: all 1s;...
Vue--过渡与动画(transition)--使用/教程/实例
IT利刃出鞘的博客
11-06 1850
原文网址 简介 说明 本文用示例介绍Vue.js的过渡与动画的用法。 官网 进入/离开 & 列表过渡 — Vue.js 过渡基础 简介 过渡的类名 在进入/离开的过渡中，会有 6 个 class 切换。对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为...
vue 组件切换过渡动画
最新发布
08-03
回答: 在Vue中，可以通过使用过渡组件和CSS动画来实现组件切换的过渡动画效果。首先，可以使用Vue的过渡组件来包裹需要过渡的组件，例如使用<transition>标签包裹<router-view>或其他需要过渡的组件。可以通过给<transition>标签添加name属性来指定过渡效果的名称，例如name="fade"。[1] 然后，可以通过CSS的animation属性来定义过渡动画的效果。可以在进入和离开时分别添加不同的CSS类名，例如在进入时添加.x-enter-active类名，在离开时添加.x-leave-active类名。然后，可以使用@keyframes关键字定义动画的关键帧，例如定义一个名为bounce-in的动画，通过transform属性来实现缩放效果。[2] 此外，还可以搭配使用第三方库，如animate.css库来实现动画效果。可以通过给<transition>标签添加enter-active-class和leave-active-class属性来指定进入和离开时的动画类名，然后在CSS中定义对应的动画效果。例如可以使用animated类名和其他动画类名来实现动画效果。[3] 总结起来，Vue组件切换过渡动画可以通过使用Vue的过渡组件和CSS动画来实现，可以直接使用CSS动画或搭配使用第三方库来实现不同的动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值