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

Question

I have this code:

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

everything works except transition......Why?

[As a side note, little point using a prefix for `transition`](https://caniuse.com/#feat=css-transitions). Also, as you are working with JQuery you might be better using `toggleClass('clicked')` — jbutler483, Jul 14 '20 at 10:24
the toggleClass with what I'm doing doesn't work, I tried it, it works very badly. However it has nothing to do with what I asked for ...... — , Jul 14 '20 at 10:30
You cant transition height or width without fixed sizes so from 0px to 200px but you can't do it with percentages or relative heights. A workaround for this is to use max-height instead. see: https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Nico Shultz, Jul 14 '20 at 10:32
Your transition should always be on the element and not on the class you are adding to it — Nico Shultz, Jul 14 '20 at 10:33
@luca88 If it doesnt work woth what you are doing, it's a secret you are not telling us. Because `toggleClass()` [does work with transition effects](https://jsfiddle.net/6ypj2mo5/). As mentioned above you need the transition to be on the element not on the class that triggers it and you can not use percentages in transitions like you did. — Lapskaus, Jul 14 '20 at 10:38
`.toggleClass` is literally just a short cut for `if (.hasClass) .removeClass() else .addClass()` (pseudo code) — freedomn-m, Jul 14 '20 at 10:44
@Lapskaus I don't think it's a problem if there is or is not toggleClass, it has nothing to do with what I asked, so don't repeat that I have to use toggleClass because it is not the solution! trust me, I tried it, it doesn't give the result I want, the result I want I get it with addClass and removeClass — , Jul 14 '20 at 10:46
@NicoShultz the post where you redirected me uses a hover, not an addClass, I want the result with a click not with a hover ... I tried with max-height but it doesn't work. — , Jul 14 '20 at 10:49
doesn't matter if it uses hover or adds a class on click it still works the same. just see the :hover as your class you are adding — Nico Shultz, Jul 14 '20 at 10:52

score 2 · Accepted Answer · answered Jul 14 '20 at 10:54

I am not sure what your required result is, maybe you could describe what you want to achieve. From your example code, I guessed you want to show and hide the text in the article's section?

You cannot use CSS Transitions on auto dimensions, like already stated in the comments. But you could use a transition on 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>

beerwin · Answer 2 · 2020-07-14T11:04:39.717

1

As @Nico Shultz explained, transitions don't work without fixed initial sizes (as transitions need reference values).

Here is an example which works.

height is tricky, but you can use max-height instead. See @Daniel Sixl's answer.

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

edited Jul 14 '20 at 11:04

answered Jul 14 '20 at 10:46

beerwin

9,813
6
42
57

Nice example, I thought transition didnt work with percentages also but i guess i was wrong. But luca88 has another problem. luca88 tries to do this with height but the height isn't increasing when you set it to height: 150%; – Nico Shultz Jul 14 '20 at 10:55
1

@NicoShultz transitions work with any numerical values. Height doesn't work because he doesnt' have an initial value for height (same thing as we discussed before). However, he can trick it by playing around with `max-height `. – beerwin Jul 14 '20 at 10:59
good to know, but the height also doesn't work because of the display on the element you can check it in his demo if you set height: 150% it doesn't get higher – Nico Shultz Jul 14 '20 at 11:05

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

2 Answers2