浮动利用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;
}
学而不思则罔,思而不学则殆!