当我在jquery中添加类时，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

我不确定你需要的结果是什么，也许你可以描述你想要实现的目标。从你的示例代码中，我猜你想在文章的部分显示和隐藏文本？

你不能在自动标注上使用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>