CSS 当 child 元素大小增加时扩展过渡

Question

我正在使用 Vuetify 并有一个带有标题和副标题的 v-list-item。但是标题长度限制为只能显示一行。如果标题较长，它将被截断并显示“...”。如果我单击列表项，我希望副标题消失并显示完整标题。这可能会导致整体的新高度v-list-item。高度的扩展应该是一个过渡，以便在我单击列表项时高度不会跳跃。我很难解决这个问题，所以也许你有一些想法。到目前为止，这是我的代码：

<v-list-item three-line :class="{ activeListItem: currentPostId === post.id }">
   <v-list-item-content>
      <v-list-item-title :class="{'full-text': currentPostId === post.id}">
         Title
      </v-list-item-title>
      <v-list-item-subtitle :class="{ 'post-subtitle-hidden': currentPostId === post.id }">
         Subtitle
      </v-list-item-subtitle>
   </v-list-item-content>
</v-list-item>

CSS:

.activeListItem {
   background-color: #c4e0ff !important;
}
.full-text {
   white-space: normal;
}
.post-subtitle-hidden {
   display: none;
}
.v-list-item__subtitle, .v-list-item__title {
   -webkit-box-flex: 1;
   -ms-flex: 1 1 100%;
   flex: 1 1 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

Answer 1

而不是 display: none 使用 max-height: 0 然后在活动 class 上给它一个 max-height 大约 100px（你认为它会使用的最大高度）比在 max-height

上添加 transition

这样会有滑动效果

--- 编辑 --- 评论中讨论内容的片段

$('.title').click(function() {
    $('.subtitle').toggleClass("subtitle-show");
});

.subtitle {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s;
}

.subtitle-show {
  max-height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="title">
  Title
</div>
  <div class="subtitle">
      The subtitle
  </div>
</div>

当我点击标题和副标题时 appears/disappears 这个实现的唯一问题是当你关闭它时你有一点延迟，因为它正在 max-height 100px 过渡到 0

据我所知，在 css 中没有更好的方法来做到这一点。

CSS 当 child 元素大小增加时扩展过渡

CSS expand transition when child element sizes increase

html

css

vue.js

vuetify.js

transition