css做圆滑展开和收起

最新推荐文章于 2023-05-27 00:00:32 发布

恰好有你

最新推荐文章于 2023-05-27 00:00:32 发布

阅读量620

点赞数

分类专栏： css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/Benz_s600/article/details/126181086

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何通过改变`.select-content`的max-height和active-list状态，配合CSS动画，实现在条件触发下下拉选项列表的流畅展开。核心在于利用元素外层容器的高度控制，确保充分展示所有选项。

摘要由CSDN通过智能技术生成

思路使用元素外层的container的max-height来实现

<div class="select-content" :class="[isShowList?'active-list':'']">
  <div class="item" v-for="(item,index) in options1" :key="index" @click="itemClick(item)">
    <span :style="{color:(item.Key === crunent?'#2BA0FF':'')}">{{item.Key}}</span>
    <Icon name="success" v-if="item.Key === crunent" :style="{color:(item.Key === crunent?'#2BA0FF':'')}" />
  </div>
</div>

组件中正常是未打开 select-content 在某种条件触发以后类名会加一个active-list，接下来看我们的样式记得展开后的高度一定要足够能够撑开你的元素尽可能的大一点再加上我们的一些过渡动画

.select-content{
   max-height: 0;
   overflow: hidden;
   transition: all ease-in-out .3s;
   .item{
     padding:0 24px ;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 70px;
     border-bottom: 2px solid #f0f0f0;
   }
 }
 .active-list{
    transition: all ease-in-out .3s;
    max-height: 500px;
  }