[Vuejs]-CSS expand transition when child element sizes increase

by

0👍

✅

Instead of display: none use max-height: 0 then on the active class give it a max-height of like 100px (the maximum height you think it will ever use) than add a transition on max-height

that way it will have a sliding effect

— edit —
snippet for what is discussed in the comments

$('.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>

When I click on the title the subtitle appears/disappears the only problem with this implementation is that when you close it you have a little delay because it is transitioning on the max-height 100px to 0

As far as I know there is no better way to do this in css.

Leave a comment