vue如何实现展开收起时height变化所引起的动画？

Question

如图

目前的效果太突兀了

代码如下:
这里使用transition没有效果

<template>
   <div class="card-list-cell">
      <h3 class="title">{{ title }}</h3>
      <transition name="fade"><p ref="desc" :style="conStyle">{{ content }}</p></transition>
      <!-- <transition name="fade"><p ref="desc" :class="showTotal ? '' : 'content-detailed'">{{ content }}</p></transition> -->
      <span class="toggel" v-if="showExchangeButton" @click="showTotalIntro">
        {{ exchangeButton ? '展开' : '收起' }}
        <i class="iconfont icon-down"></i>
      </span>
    </div>
</template>

监听中改变长度

  export default {
    props: ['item'],
    data() {
      return {
        title: this.item.title,
        content: '',  // 文本内容
        showTotal: true,  // 是否展示所有文本内容
        exchangeButton: true, // 显示展开还是收起
        showExchangeButton: false,  // 是否显示展开收起按钮
        rem: '',
        conStyle: ''
      }
    },
    watch: {
     'content': function () {
        this.$nextTick(function () {
          // 判断介绍是否超过四行
          let rem = parseFloat(this.getRem())
          console.log('watch 中的rem', rem)
          if (!this.$refs.desc) {
            // 文本为空
            return
          }
          let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
          console.log('descHeight:' + descHeight);
          console.log('如果 descHeight 超过' + (5.25 * rem) + '就要显示展开按钮');
          if (descHeight > 5.25 * rem) {
            console.log('超过了四行');
            // 显示展开收起按钮
            this.showExchangeButton = true;
            this.exchangeButton = true;
            // 不是显示所有
            this.conStyle = {height: 5.25 * rem + 'px', overflow: 'hidden'}
            this.showTotal = false;
          } else {
            // 不显示展开收起按钮
            this.showExchangeButton = false;
            console.log('showExchangeButton', this.showExchangeButton);
            console.log('showTotal', this.showTotal);
          }
        }.bind(this))
      },
      // 监听按钮的状态来显示展开还是收起
      'exchangeButton': function(val) {
        this.$nextTick(() => {
          let rem = parseFloat(this.getRem())
          if (val) {
            console.log('展开内容')
            this.conStyle = {height: 5.25 * rem + 'px', overflow: 'hidden'}
          } else {
            this.conStyle = {height: 'auto', overflow: 'normal'}
          }
        })
      }
    },
    methods: {
      showTotalIntro () {
          console.log(this.showTotal);
          this.showTotal = !this.showTotal;
          this.exchangeButton = !this.exchangeButton;
        },
      // 获取文本的文字大小（根据屏幕）
      getRem () {
        const defaultRem = 16;
        let winWidth = window.innerWidth;
        let rem = winWidth / 375 * defaultRem;
        return rem;
      },
    },
    mounted() {
      this.content = this.item.content
    },
  }

css中设置没有效果

.card-list-cell {
  position: relative;
  border: 1px solid #dddddd;
  margin-top: .5rem;
  width: 90%;
  height: auto;
  margin: .5rem auto;
  font-size: .26rem;
  color: #333;
  padding: .3rem .2rem;
  box-sizing: border-box;
  .title {
    position: absolute;
    display: block;
    width: 1.2rem;
    height: 0.4rem;
    border-radius: .1rem;
    box-sizing: border-box;
    padding: .1rem;
    background-color: #5aa4fc;
    top: 0;
    left: .3rem;
    transform: translateY(-50%);
    font-size: .2rem;
    color: #fff;
    text-align: center;
    line-height: .24rem;
    font-weight: 200;
  }
  p {
    transition: height 2s;
  }
  .content-detailed {
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .toggel {
    display: block;
    width: 100%;
    color: #666666;
    font-size: .24rem;
    text-align: center;
    padding-top: 0rem;
  }
}

// 设置图标样式
.icon-down {
  font-size: .2rem;
}

要怎么才能得到流畅的过渡效果啊？
网上搜索只得到显示和隐藏的动画
不知道这种长度发生改变的动画在vue中如何实现

Answer 1

一开始必须要有固定值的高度的，height: auto无效的,可以通过mounted初始化一个高度

Answer 2

请问动画效果实现了吗

Answer 3

请问解决了吗