css下拉显示隐藏动画效果

最新推荐文章于 2024-03-02 11:18:58 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-03-02 11:18:58 发布

阅读量972

点赞数 1

分类专栏： css 文章标签： java servlet 服务器

本文链接：https://blog.csdn.net/Guoyu1_/article/details/125373440

版权

css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

.body{
   transition:height 1s;
   height: 0rpx;
   overflow: hidden;
   &.show {
       height: 280rpx;
   }
...
}

<view class="form-list" v-if="order.orderList.length>0">
   <view class="list" v-for="item in order.orderList" :key="item.id">
       <view class="head dis-flex justify-between align-center">
           <view class="open dis-flex align-center" @click="itemHandle(item)">
               <block v-if="item.show">
                   <view class="fw700 f24">收起</view>
                   <view class="fw700 iconfont icon-upward"></view>
               </block>
               <block v-else>
                   <view class="fw700 f24">展开</view>
                   <view class="fw700 iconfont icon-downward"></view>
               </block>
           </view>
       </view>
       <view class="body" :class="item.show ? 'show' : ''">
内容...
       </view>
   </view>
</view>