浮动利用opacity实现过度隐藏动画

					<span class="role-name role-count-info">
						{{ roleCountInfo }}
						<div class="all-roleName-box">
							<li v-for="(roleName, index) in roleListNames" :key="index">
								{{roleName}}
							</li>
						</div>
					</span>
 
 
				.role-count-info {
					cursor: pointer;
					position: relative;
					right: -1px;
					.all-roleName-box {
						background: linear-gradient(0deg, rgba(204, 219, 255, 0.16), rgba(204, 219, 255, 0.16)),
						linear-gradient(0deg, rgba(36, 40, 58, 0.48), rgba(36, 40, 58, 0.48));
						position: absolute;
						top: 30px;
						left: -80px;
						padding: 8px;
						border-radius: 8px;
						opacity: 0;
						z-index: 9999;
						transition: all 1s ease;
						li {
							background: rgba(61, 133, 255, 0.15);
							color: rgba(61, 133, 255, 1);
							padding: 2px 4px;
							border-radius: 8px;
							font-size: 16px;
							margin-bottom: 4px;
							width: 100px;
							white-space: nowrap; /* 防止文字换行 */
							overflow: hidden; /* 隐藏超出容器的文字 */
							text-overflow: ellipsis; /* 显示省略号 */
						}
					}
				}
 
				.role-count-info:hover .all-roleName-box {
					opacity: 1;
				}