小程序之auto过渡无效JS解决方式。

       课设无意遇到这个问题，网上很多用的max-height或者嵌套来解决的例子（效果不是很好），却没有js的例子，这里分享一下我的解决方式。（且慢，如果这篇文章能够帮到你给个赞在走呗），原创实属不易，难于坚持写博客。
1、问题原因
       transition属性只对确定的高度变化有效，因为auto是不定高的，所以该属性没有效果。（PS:请注意过渡块是否有图片，有图片必须给出高度，水平过渡必须给出宽度，否则会产生大量空白！）
2、解决方法
       在加载页面的时候使用js获取容器高度，在赋值给容器的height属性，即可有过渡的效果。
3、效果演示
4、程序源码

<view style="height:100%">
  <view class="title-container">
    <view class="title-content">
      <text class="title font-middle">常见问题</text>
    </view>
  </view>
  <scroll-view class="agreenment-container" scroll-y="true">
    <view class="agreenment-content">
      <view class="question-container">
        <view id="0" catchtap="collapse" class="question-content flex-row-center">
          <view class="flex-row-center">
            <text class="question-num font-middle" decode="{{true}}" space="{{true}}">Q1.&nbsp;&nbsp;</text>
            <text class="question-description font-middle">如何从win10远程传输文件到centos7？</text>
          </view>
        </view>
        <view id="a0" style="height:{{heights[0]}}" class="{{collapses[0]?'show-content':'hide-content'}}">
          <view class="internal-line"></view>
          <view class="answer-content">
            <view class="answer-content-description">
              <text class="font-small">1∶下载pscp.exe\n2：将下载的pscp.exe拷贝到C:\Windows\System32\n3：搜索cmd,以管理员方式运行，是用pscp命令进行文件拷贝\n4：输入centos7的root 密码，回车</text>
            </view>
          </view>
        </view>
      </view>

      <!--2-->
      <view class="question-container">
        <view id="1" catchtap="collapse" class="question-content flex-row-center">
          <view class="flex-row-center">
            <text class="question-num font-middle" decode="{{true}}" space="{{true}}">Q2.&nbsp;&nbsp;</text>
            <text class="question-description font-middle">centos常用命令有哪些？</text>
          </view>
        </view>
        <view id="a1" style="height:{{heights[1]}}" class="{{collapses[1]?'show-content':'hide-content'}}">
          <view class="internal-line"></view>
          <view class="answer-content">
            <view class="answer-content-description">
              <text class="font-small">1.软连接（可以理解为windows下的快捷连接）
ln -s 目的路径 连接符
例子： ln –s /home/feng/html html
\n2.用户与组
useradd／useradd 用户名 #添加用户
passwd 用户名 #设置用户密码
usermod -a -G apache feng # -a表示保留feng的原来所在组，并且添加feng到apache组
gpasswd –a feng apache #从apache组中删除用户
passwd -d 用户名 #清除用户密码
userdel –r 用户名 #删除用户
groups 用户名 #查看某用户所属组
</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

page {
    width: 100%;
    height: 100%;
}

.title-container {
    padding: 10% 5% 5% 5%;
    background-color: #ffda44;
}

.title-content {
    display: flex;
    align-items: center;
}

.title {
    display: flex;
    width: 100%;
    justify-content: center;
}

.font-small {
    font-size: 14px;
}

.font-middle {
    font-size: 16px;
}


.agreenment-container {
    width: 100%;
    font-size: 14px;
    overflow: hidden;
    height: 82%;
}

.agreenment-content {
    position: absolute;
    width: 90%;
    height: 100%;
    padding: 0 5%;
    background: #f4f4f4;
}

.flex-row-center {
    display: flex;
    justify-items: center;
    align-items: center;
}

.question-container {
    background: #ffffff;
}

.question-content {
    padding: 3% 1% 3% 6%;
    margin-top: 15px;
    border-radius: 5px;
}

.question-num {
    color: #888888;
}

.question-descriptions {
    color: #222222;
}

.internal-line {
    width: 100%;
    height: 1px;
    background: #eeeeee;
    margin-top: 3%;
}

.answer-content {
    padding-left: 6%;
    padding-right: 6%;
}

.answer-content-description {
    color: #9d9d9d;
    padding: 10px 0;
    text-align: justify;
}

.hide-content {
    transition: height 2s;
    overflow: hidden;
    height: 0;
}

.show-content {
    transition: height 2s;
    overflow: hidden;
}

如果是QQ小程序请将wx.createSelectorQuery();换成qq.createSelectorQuery();

Page({
  data: {
    collapses: [true, true],
    heights: ['auto', 'auto'],
    tempHeights: ['auto', 'auto']
  },
  onLoad: function () {
    var query = wx.createSelectorQuery();
    query.selectAll(".show-content").boundingClientRect(rect => {
      var elements = rect;
      var heights = this.data.heights;
      for (var i = 0; i < elements.length; i++) {
        heights[i] = elements[i].height;
      }
      this.setData({
        heights: JSON.parse(JSON.stringify(heights)),
        tempHeights: JSON.parse(JSON.stringify(heights))
      })
      var collapsesTemp = this.data.collapses;
      for (var i = 0; i < collapsesTemp.length; i++) {
      	collapsesTemp[i] = false;
      }
      this.setData({
      	collapses: JSON.parse(JSON.stringify(collapsesTemp)),
      })
    }).exec();
  },
  collapse: function (e) {
    let index = e.currentTarget.id;

    var collapses = this.data.collapses;
    collapses[index] = !collapses[index];
    var heights = this.data.heights;

    // 展开
    if (collapses[index]) {
      var tempHeights = this.data.tempHeights;
      heights[index] = tempHeights[index] + "px";
      // 收缩
    } else {
      heights[index] = 0;
    }
    this.setData({
      heights: heights，
      collapses: collapses
    })
  }
})