css - 单击显示更多按钮时如何使用缓入

Question

我想在点击显示更多时有一个 3 秒的缓入/缓出动画，但我发现我无法实现，因为我使用的是 overflow: hidden 和 -webkit-line-clamp: 2;

还有其他方法吗？

HelloWorlfd.vue

<template>
  <div class="item">
    <div :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>show More</span>
    </button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      isShowMore: false,
    };
  },
  methods: {
    toggleShowMore() {
      this.isShowMore = !this.isShowMore;
    },
  },
};
</script>
<style scoped lang="scss">
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 558px;
  height: auto;
  .description {
    margin-bottom: 36px;
  }
  .description--hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
  }
  .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>

代码沙盒：
https://codesandbox.io/s/magical-https-ukev7?file=/src/components/HelloWorld.vue:0-1726

Answer 1

正如您所说，-webkit-line-clamp: 2 可能是动画无法播放的原因。但是，overflow: hidden 不应该阻止这种情况，如果我们使用带有关键帧的动画属性来延迟它的时间。

另外我们可以使用transition属性和max-height来创建下拉效果。

以下是您的 css 版本，它将为您提供所需的转换：)

您可以根据需要调整高度的属性值以及动画和过渡的时间。

如果这有帮助，请告诉我:)！

.description {
    margin-bottom: 36px;
    max-height: 500px;
    transition: all ease-in 0.3s;
    overflow: auto;
  }
  @keyframes delay-overflow {
    from { overflow: auto; }
  }
  .description--hidden {
    max-height: 40px;
    overflow:hidden;
    animation: 1s delay-overflow;
  }