当我在 jquery 中添加 class 时，css 中的过渡不起作用

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

正如@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>

Answer 2

我不确定你需要的结果是什么，也许你可以描述一下你想要达到的目标。根据您的示例代码，我猜您想显示和隐藏文章部分中的文本？

您不能在自动尺寸上使用 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>

当我在 jquery 中添加 class 时，css 中的过渡不起作用

the transition in css does not work when i add class in jquery

css

jquery

css-transitions