微信小程序---缓慢展开和收起效果（不需要wx:if控制实现）_微信小程序点击展开效果动画

一、能实现效果：

效果一：

点击中间问题，在中间缓慢展开 ，将下面往下撑开，点击再次收起效果

效果二：

点击添加商品，缓慢向下展开，点击收起，缓慢将下面收起效果

二、实现方法：

1、实现的原理：

通过height高度来控制展开或收起，当不需要展示时，高度为0，超过的部分用overflow: hidden;来隐藏，可以通过该方法来让需要展示的页面隐藏起来，然后显示的时候，将height条件去掉，在加上transition来控制动画即可

 2、效果一具体实现方法：

wxml：

<view class='help'>
  <view class='help_item' wx:for="{{questList}}" wx:key="index">
    <view class='title' data-index='{{index}}' catchtap='panel'>
      <view class='title_1'>{{item.title}}</view>
      <view class='title_2'><image src="/pages/images/common/{{item.t ? 'up':'down'}}.png"></image></view>
    </view>
    <view class='detail' style="height:{{ item.t?'':0}}">{{item.content}}</view>
  </view>
</view>

 js部分:

data: {
    showIndex: 10,
    questList: [{
      title: 'Q：这是问题',
      content: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",
      t:false,
    }, {
      title: 'Q：这是问题',
      content: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",
      t:false,
    }, {
      title: 'Q：这是问题',
      content: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",
      t:false,
    }]
  },
panel: function (e) {
    this.data.questList[e.currentTarget.dataset.index].t = !this.data.questList[e.currentTarget.dataset.index].t
    this.setData({
      questList:this.data.questList
    })
    if (e.currentTarget.dataset.index != this.data.showIndex) {
      this.setData({
        showIndex: e.currentTarget.dataset.index,
      })
    } 
    else {
      this.setData({
        showIndex: 10
      })
    }
  },

wxss：

.help {
  width: 700rpx;
  margin: 0 auto;
}
 
.help .help_item {
  margin: 10rpx auto;
}
 
.help .help_item .title {
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  /* background: #e2e2e2; */
  border-bottom: 1rpx solid #eeeeee;
  display: flex;
}
 
.help .help_item .title .title_1 {
  width: 630rpx;
  height: 80rpx;
  padding-left: 20rpx;
}
 
.help .help_item .title .title_2 {
  width: 50rpx;
  height: 60rpx;
  text-align: center;
 
}
 
.help .help_item .title .title_2 image {
  width: 40rpx;
  height: 40rpx;
  margin: 10rpx auto;
}
 
.help .help_item .detail {
  margin: 10rpx auto;
  font-size: 25rpx;
  line-height: 40rpx;
  font-size: 30rpx;
  height: 300rpx;
  transition: height 1s;
  -moz-transition: height 1s;
  /* Firefox 4 */
  -webkit-transition: height 1s;
  /* Safari and Chrome */
  -o-transition: height 1s;
  /* Opera */
  overflow: hidden;
}

3、效果二实现方法：

原理实现是一样的，只需要将主要部分即可。

.cart-add-box {
  height: 140rpx;//设置好展开需要到什么高度
  transition: height 0.5s;//设置好动画效果
  -moz-transition: height 0.5s;
  -webkit-transition: height 0.5s;
  -o-transition: height 0.5s;
  overflow: hidden;//高度为0时，直接隐藏内容
}
 
<view class='cart-add-box' style="height:{{ is_add_code?'':0}}">内容：小马哥</view>
 
通过is_add_code：true/false来展示效果即可。

方法简单，只需要明白实现的原理即可实现自己喜欢的效果