vue 下拉列表组件 缓动动画 css样式 升级

最新推荐文章于 2024-04-25 17:52:15 发布
最新推荐文章于 2024-04-25 17:52:15 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： vue js css效果 文章标签： js vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsp13270124/article/details/103797029
版权
js 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
vue
4 篇文章 0 订阅
订阅专栏
css效果
3 篇文章 0 订阅
订阅专栏

input式的下拉列表的东西

  • 由于极其不爽这个input的下拉列表的样式所以自己写了一个
  • 这个三角的东西是用的图片所以 自己弄一个上去吧

之前的那个有个bug, 就是它没有出来的时候都会档住下面的东西
其实还有一个思路就是改变外面边框的高度这样就不会在拉上去的时候挡住, 下面的东西

展示

在这里插入图片描述

不会档住的形式

  • 核心思路就是将内部的bottom变换改成外面over-flow: hidden 的盒子的高度变化

DropDownList.vue

<template>
   <div 
   class="drop-down-list" 
   :style = "getStyle"
   ref = "drop"
   @click = "dropDown"
   >
   	{{value}}
   	<img 
   	src="~assets/img/common/triangle.svg" 
   	:class = "getClass" 
   	class = "icon" alt="">
   	
   	<div 
   	class = "down-list"
   	:style = "getDropStyle"
   	ref = "downListOuter">
   		<div ref = 'downlist' 
   		class = "list-in"
   		>
   			<list-item 
   			v-for = "item in list" 
   			:item = "item"
   			@itemClick = "itemClick"
   			:importance = "getImportance(item)">
   				<!-- 阻止事件冒泡 -->
   			</list-item>
   		</div>
   	</div>
   </div>
</template>

<script>
   import ListItem from './ListItem'
   
   export default {
   	name: 'DropDownList',
   	data() {
   		return {
   			value: this.list[0],
   			isDown: false,
   			time: -1,
   			only: true,
   			dropDownHeight: "100px",
   			initHeight: ""
   		}
   	},
   	props: {
   		list: {
   			type: Array,
   			default () {
   				return [
   					"成都",
   					"北京",
   					"上海"
   				]
   			}
   		},
   		width: {
   			type: String,
   			default: "72%"
   		},
   	},
   	components: {
   		ListItem
   	},
   	mounted() {
   		console.log( "mounted: " + window.getComputedStyle(this.$refs.downlist).height )
   		this.dropDownHeight = window.getComputedStyle(this.$refs.downlist).height
   	},
   	methods: {
   		getImportance(item) {
   			console.log(this.value == item)
   			return this.value == item
   		},
   		itemClick(value) {
   			this.value = value
   		},
   		dropDown() {
   			// // 缓动动画
   			let n = 0.08
   			if( this.time != -1 ) {
   				clearInterval(this.time)
   			}
   			// if( this.only ) {
   			// 	this.only = false;
   				this.isDown = !this.isDown;
   				if( this.isDown ) {
   					this.$refs.downListOuter.style.zIndex = 0;
   					this.dropDownList(n)
   				} else {
   					this.dropUpList(n)
   				}
   			// }
   		},
   		dropDownList(n) {
   			// 正往下拉的情况
   			const downlist = this.$refs.downlist
   			const downListOuter = this.$refs.downListOuter
   			// 关闭上一个计时器
   			if( this.time != -1 ) {
   				clearInterval(this.time)
   			}
   			
   				downlist.style.bottom = 0 + "px"

   			
   			let index2;
   			if( this.initHeight == "" ) {
   				this.initHeight = this.getNumber(downListOuter.style.height);
   				console.log(this.initHeight)
   			}
   			let result2 = this.initHeight;
   			// 让下拉列表窗口的高度等于0
   			downListOuter.style.height = 0 + "px";
   			
   			let index;
   			let result = 0;
   			this.time = setInterval( ()=>{
   				index = this.getNumber(downlist.style.bottom)
   				result = 0;
   				
   				// downlist.style.bottom = index - (index - result) * n + "px";
   				
   				index2 = this.getNumber(downListOuter.style.height);
   				downListOuter.style.height = index2 - (index2 - result2) * n + "px";
   				
   				if( Math.abs(this.getNumber(downListOuter.style.height) - result2) < 0.1  ) {
   					clearInterval(this.time)
   					// downlist.style.bottom = result + "px";
   					downListOuter.style.height = result2 + "px";
   				}
   			} , 10 )
   		},
   		dropUpList(n) {
   			const downlist = this.$refs.downlist
   			const downListOuter = this.$refs.downListOuter
   			// 关闭上一个计时器
   			if( this.time != -1 ) {
   				clearInterval(this.time)
   			}
   			
   			let index2;
   			let result2 = 0;
   			
   			// 初始化高度 100%
   			let index;
   			let result = this.getNumber(downlist.parentElement.style.height);
   			
   			this.time = setInterval( ()=>{
   				index = this.getNumber(downlist.style.bottom)
   				// downlist.style.bottom = index + (result - index) * n + "px";
   				
   				index2 = this.getNumber(downListOuter.style.height);
   				downListOuter.style.height = index2 + (result2 - index2) * n + "px";
   				console.log("downListOuter.style.height", downListOuter.style.height)
   				
   				if( Math.abs(downListOuter.style.height - result2) < 0.1  ) {
   					clearInterval(this.time)
   					downlist.style.bottom = result + "px";
   					downListOuter.style.height = result2 + "px";
   					this.$refs.downListOuter.style.zIndex = -10;
   				}
   			} , 10 )
   		},
   		getNumber( inputStr ) {
   			// 字符串转化成数字
   			return Number(inputStr.replace("px", ""))
   		}
   	},
   	computed: {
   		getStyle() {
   			return {
   				width: this.width,
   			}
   		},
   		getClass() {
   			return {
   				'rotate': this.isDown
   			}
   		},
   		getDropStyle() {
   			return {
   				height: this.dropDownHeight
   			}
   		}
   	}
   }
</script>

<style scoped>
   .drop-down-list {
   	position: relative;
   	display: flex;
   	justify-content: space-between;
   	border-radius: 5px;
   	padding: 5px 10px 5px 10px;
   	font-size: 16px;
   	border: 1px solid #ccc;
   	transition: all .5s;
   	
   }

   .drop-down-list:hover {
   	outline: none;
   	box-shadow: 0 0px 15px skyblue;
   }
   
   .bg-red {
   	background-color: red;
   }
   
   .icon {
   	width: 20px;
   	margin-top: 3px;
   	transform: rotate(180deg);
   	transition: all 0.3s;
   }
   
   .rotate {
   	transform: rotate(0deg); 
   	transform-origin: 50% 50%; 
   }
   
   .down-list {
   	position: absolute;
   	top: calc(100% + 5px);
   	left: 0px;
   	width: 100%;
   	background-color: transparent;
   	
   	z-index: -10;
   	overflow: hidden;
   }
   
   .list-in {
   	position: absolute;
   	bottom: 100%;
   	
   	/* height: 100%; */
   	width: 100%;
   	padding: 10px 0px;
   	background-color: white;
   	
   	border-radius: 0 0 5px 5px;
   }
</style>

文件结构

在这里插入图片描述

DropDownList.vue

<template>
	<div 
	class="drop-down-list" 
	:style = "getStyle"
	ref = "drop"
	@click = "dropDown"
	>
		{{value}}
		<img 
		src="~assets/img/common/triangle.svg" 
		:class = "getClass" 
		class = "icon" alt="">
		
		<div 
		class = "down-list"
		:style = "getDropStyle"
		ref = "downListOuter">
			<div ref = 'downlist' 
			class = "list-in"
			>
				<list-item 
				v-for = "item in list" 
				:item = "item"
				@itemClick = "itemClick"
				:importance = "getImportance(item)">
					<!-- 阻止事件冒泡 -->
				</list-item>
			</div>
		</div>
	</div>
</template>

<script>
	import ListItem from './ListItem'
	
	export default {
		name: 'DropDownList',
		data() {
			return {
				value: this.list[0],
				isDown: false,
				time: -1,
				only: true,
				dropDownHeight: "100px"
			}
		},
		props: {
			list: {
				type: Array,
				default () {
					return [
						"成都",
						"北京",
						"上海"
					]
				}
			},
			width: {
				type: String,
				default: "72%"
			},
		},
		components: {
			ListItem
		},
		mounted() {
			console.log( "mounted: " + window.getComputedStyle(this.$refs.downlist).height )
			this.dropDownHeight = window.getComputedStyle(this.$refs.downlist).height
		},
		methods: {
			getImportance(item) {
				console.log(this.value == item)
				return this.value == item
			},
			itemClick(value) {
				this.value = value
			},
			dropDown() {
				// // 缓动动画
				let n = 0.08
				if( this.time != -1 ) {
					clearInterval(this.time)
				}
				// if( this.only ) {
				// 	this.only = false;
					this.isDown = !this.isDown;
					if( this.isDown ) {
						this.$refs.downListOuter.style.zIndex = 0;
						this.dropDownList(n)
					} else {
						this.dropUpList(n)
					}
				// }
			},
			dropDownList(n) {
				// 正往下拉的情况
				const downlist = this.$refs.downlist
				// 关闭上一个计时器
				if( this.time != -1 ) {
					clearInterval(this.time)
				}
				
				// 初始化高度 100%不行
				if( downlist.style.bottom == "" ) {
					downlist.style.bottom = downlist.parentElement.style.height
				}
				
				let index;
				let result = 0;
				this.time = setInterval( ()=>{
					index = this.getNumber(downlist.style.bottom)
					result = 0;
					
					downlist.style.bottom = index - (index - result) * n + "px";
					
					
					if( Math.abs(this.getNumber(downlist.style.bottom) - result) < 0.1  ) {
						clearInterval(this.time)
						downlist.style.bottom = result + "px";
					}
				} , 10 )
			},
			dropUpList(n) {
				const downlist = this.$refs.downlist
				// 关闭上一个计时器
				if( this.time != -1 ) {
					clearInterval(this.time)
				}
				
				// 初始化高度 100%
				let index;
				let result = this.getNumber(downlist.parentElement.style.height);
				
				this.time = setInterval( ()=>{
					index = this.getNumber(downlist.style.bottom)
					downlist.style.bottom = index + (result - index) * n + "px";
					
					if( Math.abs(this.getNumber(downlist.style.bottom) - result) < 0.2  ) {
						clearInterval(this.time)
						downlist.style.bottom = result + "px";
						this.$refs.downListOuter.style.zIndex = -10;
					}
				} , 10 )
			},
			getNumber( inputStr ) {
				// 字符串转化成数字
				return Number(inputStr.replace("px", ""))
			}
		},
		computed: {
			getStyle() {
				return {
					width: this.width,
				}
			},
			getClass() {
				return {
					'rotate': this.isDown
				}
			},
			getDropStyle() {
				return {
					height: this.dropDownHeight
				}
			}
		}
	}
</script>

<style scoped>
	.drop-down-list {
		position: relative;
		display: flex;
		justify-content: space-between;
		border-radius: 5px;
		padding: 5px 10px 5px 10px;
		font-size: 16px;
		border: 1px solid #ccc;
		transition: all .5s;
	}

	.drop-down-list:hover {
		outline: none;
		box-shadow: 0 0px 15px skyblue;
	}
	
	.bg-red {
		background-color: red;
	}
	
	.icon {
		width: 20px;
		margin-top: 3px;
		transform: rotate(180deg);
		transition: all 0.3s;
	}
	
	.rotate {
		transform: rotate(0deg); 
		transform-origin: 50% 50%; 
	}
	
	.down-list {
		position: absolute;
		top: calc(100% + 5px);
		left: 0px;
		width: 100%;
		background-color: transparent;
		
		z-index: -10;
		overflow: hidden;
	}
	
	.list-in {
		position: absolute;
		bottom: 100%;
		
		/* height: 100%; */
		width: 100%;
		padding: 10px 0px;
		background-color: white;
		
		border-radius: 0 0 5px 5px;
	}
</style>

ListItem.vue

<template>
	<div 
	class = "list-item"
	@click = "itemClick(item)">
		{{item}}
	</div>
</template>

<script>
	export default {
		name: 'ListItem',
		methods: {
			itemClick(value) {
				this.$emit("itemClick", value)
			}
		},
		props: {
			item: {
				type: String,
				default: "item"
			}
		}
	}
</script>

<style scoped>
	.list-item {
		padding: 5px 10px;
	}
	
	.list-item:hover {
		background-color: #F0F1F2;
	}
</style>
jsp13270124
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue导航栏下拉菜单（附带展开收缩动画）
小多的博客
08-19 5199
先看效果： 下拉动画 方法一：鼠标移入移出事件 使用的是vue的 组件以及鼠标事件 和 优点：缺点：案例代码 方法二：hover 将下拉菜单需要下拉的导航栏下一级下，使用 控制元素，不要设置相对定位，以免定位时下拉菜单宽度不能100%铺满导航栏宽度。 将菜单初始高度设为0 优点：缺点：案例代码.........
菜单下拉列表怎么实现慢慢出现效果-----过渡（transition）
热门推荐
lxhby520的博客
04-18 2万+
首先这里用到的知识是transition过渡：从一种样式逐渐改变为另一种的样式效果从图来看，是高度发生了变化，&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1
html+css实现菜单栏缓慢下拉效果
weixin_45877762的博客
03-20 1万+
纯css实现菜单栏缓慢下拉效果 目标：利用css实现鼠标移到菜单栏时，菜单栏会缓慢出现的效果 我们可以用两种方法来解决这个问题 方法一：过渡（transition） 对forum-1开启绝对定位(absolute)，让里面的li从其父元素中脱离出去，不然会把之后的内容往右挤，并且设置overflow：hidden, 设置高度为0， 鼠标移入后再设置相应的高度即可 .code .forum-1{ /* 开启绝对定位 */ position: absolute; overflow: hidd
el-table 三角形提示
最新发布
凡尘
04-25 538
el-table 三角形提示
animate step()下拉列表右三角动画效果
劲枫的博客
04-27 385
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="http://lib.baomitu.com/twitter-b
vue导航栏滚动下拉条上拉隐藏，下拉显示切换样式变化(源码)
m0_49714202的博客
06-24 2008
vue导航栏滚动下拉条上拉隐藏，下拉显示切换样式变化(源码)
vue实现列表滚动的过渡动画
11-20
这个库允许我们在Vue中方便地创建和控制关键帧动画，可以精确地定义元素在不同时间点的样式，从而实现平滑的过渡效果。 在Vue的模板部分，我们使用`v-for`指令遍历列表，并且根据`startIndex`和`endIndex`来决定...
基于vue封装的轻量级下拉刷新组件
08-12
5. **样式设计**：在`style`部分，为组件添加相应的CSS样式，确保指示器在不同状态下有合适的视觉效果。 6. **事件绑定**：在模板中，使用`v-on`指令绑定滚动事件到`handleScroll`方法。 7. **API调用**：在`...
vue城市下拉模拟组件Citypicker
06-01
Vue城市下拉模拟组件Citypicker是一款专为Vue.js框架设计的高效、易用的城市选择器。这个组件在前端开发中非常实用，特别是在处理地址输入、地理位置筛选等场景时，能够提供用户友好的交互体验。Vue.js是当前非常...
Vue2(三)实现子菜单展开收缩，带动画效果实现方法
10-17
通过这种方式，我们可以在不依赖第三方库的情况下，利用Vue和CSS3实现一个优雅的子菜单展开收缩动画效果。这样的设计既满足了美观的需求，又保持了代码的简洁性，对学习和工作都具有很高的参考价值。希望这个教程能...
168国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip
08-03
UI组件是用户界面的核心部分，它们是网页设计中的可重用模块，如导航菜单、下拉列表、滑动面板等。这些组件通常由HTML、CSS和JavaScript共同构成，旨在提供一致且易于使用的交互体验。高质量的UI组件库，如Bootstrap...
二级下拉菜单缓慢渐变
weixin_41812346的博客
06-18 1136
二级下拉菜单缓慢渐变 transition属性与display属性相冲突，不能使用这两种属性达到渐变效果。 transition属性与height属性结合， 初始时二级菜单高度为0， 通过溢出隐藏，使整个二级菜单在一开始就整个隐藏， 当鼠标悬停在一级菜单某项上时，通过高度的渐变，溢出部分逐渐减少，让二级菜单随着高度变化而显示出来， 达到二级下拉菜单缓慢渐变的效果。 <!DOCTYPE html> <html lang="en" > <head> <meta
使用Vue指令实现下拉菜单效果
yuhaowen的博客
03-19 7314
使用Vue指令实现下拉菜单效果 模仿重庆红岩历史革命博物馆官网的导航栏内容和效果，使用Vue实现。 官网地址如下：https://www.hongyan.info/ 官网效果 效果图片展示 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
element Dropdown二级下拉菜单
weixin_38923162的博客
03-15 2521
开发中经常遇见二级菜单开发，但是element中的Dropdown下拉菜单demo没有二级，所以在此记录一下。此代码适用一级菜单 二级菜单。样式需自己重新调整。
vue3列表每次滚动下拉显示加载动画
Yyh18055242681的博客
12-17 153
vue3列表每次滚动下拉显示加载动画
通过示例了解Vue过渡和动画，最简单的前端自定义ListView下拉刷新与上拉加载
m0_60707538的博客
03-31 718
将自定义库添加到代码中时，这特别有用，稍后，我们会做说明。另外，transition元素还会发出JS钩子函数，因此我们可以捕获它们并使用 JS 来执行动画。可用的钩子有：...然后，我们可以在 JS 中处理它们。done()
vue实现手风琴下拉菜单带动画效果
weixin_45573681的博客
12-22 853
1、添加collapse-transition.js。 2、页面以组件形式引入，下拉展示内容包裹在组件内部。
vue 实现数字缓动效果
code_carrierV1的博客
09-22 1881
vue 实现数字缓动效果 对于静态网页，增加一个数字缓动的效果能更好提升用户体验， 例如数字从0增加到一百，有个动态变动的过程，当然直接变也可以， 就是效果没那么好看 下面看代码 安装依赖： npm install --save @tweenjs/tween.js HTML <el-col :span="5"> <div style="margin-top: 30px;border-right: 1px #D8D8D8 solid"> &
vue 动态控制组件css样式
11-23
可以使用Vue的计算属性和绑定class来动态控制组件的CSS样式。具体步骤如下： 1.在Vue组件中定义计算属性，根据需要动态计算CSS类名。 2.使用v-bind:class指令将计算属性绑定到组件的class属性上。 下面是一个例子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值