使用-webkit-line-clamp截断时如何为查看更多按钮添加ease-in动画

可行实现方案 #

你现在用的-webkit-line-clamp属于webkit私有属性，本身不支持CSS过渡动画，所以无法直接加展开收起的缓动效果，推荐两种实现方案： #

方案1：CSS max-height 过渡实现（改造成本最低）

核心思路是通过控制文本容器的max-height属性实现过渡，配合渐变遮罩模拟末尾省略号效果，无需修改模板和JS代码，仅调整样式即可：

<style scoped lang="scss">
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 558px;
  height: auto;
  .description {
    margin-bottom: 36px;
    line-height: 1.5; // 固定行高方便计算截断高度
    position: relative;
    overflow: hidden;
    // 绑定3秒ease-in-out过渡效果
    transition: all 3s ease-in-out;
    // 展开状态设置为远大于实际文本高度的值即可
    max-height: 1000px;
    &.description--hidden {
      // 2行文本高度计算公式：行数 * 字号 * 行高，这里留了少量冗余，可根据实际样式调整
      max-height: 52px;
      // 模拟末尾省略号，背景色和页面背景保持一致即可
      &::after {
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
        background: #fff;
        padding-left: 4px;
      }
    }
  }
  .show-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    background-color: transparent;
    border: none;
    &:hover {
      cursor: pointer;
    }
    span {
      padding: 0 0.5rem;
    }
  }
}
</style>

方案2：JS计算高度实现（动画效果最自然）

如果需要更均匀的过渡效果，避免max-height取值过大导致动画后半段速度过快的问题，可以用JS提前计算文本的完整高度和收起时的2行高度，切换时直接修改height属性实现过渡：

1. 先修改模板，给文本容器加ref属性方便获取元素参数：

<template>
  <div class="item">
    <div ref="descRef" :class="{ description: true, 'description--hidden': isShowMore }">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </div>
    <button class="show-more-btn" @click="toggleShowMore">
      <span>{{ isShowMore ? '收起' : 'show More' }}</span>
    </button>
  </div>
</template>

2. 修改JS逻辑，挂载时提前计算高度：

<script>
export default {
  components: {},
  data() {
    return {
      isShowMore: false,
      // 存储文本完整高度和收起时的2行高度
      fullHeight: 0,
      foldHeight: 0
    };
  },
  mounted() {
    // 获取完整文本的实际高度
    this.fullHeight = this.$refs.descRef.scrollHeight;
    // 读取样式中设置的行高，计算2行文本的高度
    const lineHeight = parseFloat(getComputedStyle(this.$refs.descRef).lineHeight);
    this.foldHeight = lineHeight * 2;
    // 初始化设置收起状态的高度
    this.$refs.descRef.style.height = this.foldHeight + 'px';
  },
  methods: {
    toggleShowMore() {
      this.isShowMore = !this.isShowMore;
      // 切换容器高度触发过渡动画
      this.$refs.descRef.style.height = this.isShowMore ? this.fullHeight + 'px' : this.foldHeight + 'px';
    },
  },
};
</script>

3. 调整样式绑定height过渡：

<style scoped lang="scss">
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 558px;
  height: auto;
  .description {
    margin-bottom: 36px;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
    // 绑定高度的3秒缓动过渡
    transition: height 3s ease-in-out;
  }
  .description--hidden::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fff;
    padding-left: 4px;
  }
  .show-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    background-color: transparent;
    border: none;
    &:hover {
      cursor: pointer;
    }
    span {
      padding: 0 0.5rem;
    }
  }
}
</style>

内容的提问来源于stack exchange，提问作者CCCC