переход в css не работает, когда я добавляю класс в jquery

Question

У меня есть этот код:

$('.increases').click(function() {
  var containerIncrases = $(this).parent().parent();
  if (!containerIncrases.hasClass('clicked')) {
    $('article').removeClass('clicked');
    containerIncrases.addClass('clicked');
  } else {
    containerIncrases.removeClass('clicked');
  }
});

.clicked {
  height: 150%;
  z-index: 2000;
}

.clicked {
  -webkit-transition: height 1.5s;
  -moz-transition: height 1.5s;
  transition: height 1.5s;
}

<article>
  <header>
    <img class="increases" src="https://blabla.jpg">
  </header>
  <section>
    something...
  </section>
</article>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

все работает кроме перехода ...... Почему?

Answer 1

Я не уверен, каков ваш требуемый результат, возможно, вы могли бы описать, чего хотите достичь. Из вашего примера кода я догадался, что вы хотите показать и скрыть текст в разделе статьи?

Вы не можете использовать CSS Переходы для автоматических размеров, как уже было сказано в комментариях. Но вы можете использовать переход на max-height.

$(".increases").click(function () {
  const parentArticle = $(this).closest("article");
  parentArticle.toggleClass("clicked");
});

article {
  height: auto;
  max-height: 300px;
  overflow: hidden;
  max-width: 600px;
  background-color: lightgray;
  border: 2px solid #333;
  margin: 1rem auto;
  transition: max-height 300ms ease-out;
  cursor: pointer;
}

article.clicked {
  max-height: 600px;
}

article > section {
  padding: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
  <header>
    <img class="increases" src="https://picsum.photos/600/300?1">
  </header>
  <section>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </section>
</article>

<article>
  <header>
    <img class="increases" src="https://picsum.photos/600/300?2">
  </header>
  <section>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </section>
</article>

Answer 2

Как объяснил @Nico Shultz, переходы не работают без фиксированных начальных размеров (так как для переходов требуются справочные значения).

Вот пример, который работает.

height сложно , но вместо этого можно использовать max-height. См. Ответ @Daniel Sixl.

$('.increases').click(function() {
  var containerIncreases = $(this).closest('article');
  containerIncreases.toggleClass('clicked');
});

article {
  width: 50%;
  -webkit-transition: width 1.5s ease;
  -moz-transition: width 1.5s ease;
  transition: width 1.5s ease;
}

.increases {
  width: 100%;
}

.clicked {
  width: 150%;
  z-index: 2000;
  -webkit-transition: width 1.5s ease;
  -moz-transition: width 1.5s ease;
  transition: width 1.5s ease;
}

<article>
  <header>
    <img class="increases" src="https://images.unsplash.com/photo-1488272690691-2636704d6000?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80">
  </header>
  <section>
    something...
  </section>
</article>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>