CSS3 transition animation when adding/removing class in child elements

Question

I have a problem that CSS3 transitions doesn't work on child elements when adding a class to a parent.

Here's my code: http://jsfiddle.net/4zwg3/327/

Image doesn't get animations and instantly goes to 50px height.

CSS:

.header {
  height: 400px;
  width: 400px;
  background: blue;
}

.small_header img {
    height: 50px;
    background-size: auto 100%;    
    -webkit-transition: all 1.7s ease;
    transition: all 1.7s ease;
}

.small_header {
    height: 100px;
    background-size: auto 100%;    
    -webkit-transition: all 1.7s ease;
    transition: all 1.7s ease;
}

HTML:

<div class="header">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>

Javascript:

var click = 1;

$( ".header" ).on( "click", function() {
console.log('works');
    if (click == 1) {
        $(".header").addClass("small_header");
        $(".small_header").removeClass("big_header");
        click = 0;
    } else {
        $(".header").addClass("big_header");
        $(".small_header").removeClass("small_header");
        click = 1;
    }
});

But as you can see there's no transition animations on image.

How can it be fixed?

Please check this link:-http://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery — Razia sultana, Nov 14 '16 at 15:31

Germano Plebani · Accepted Answer · 2016-11-14T15:26:53.163

This issue because the image doesn't have any start height and browser can't calculate the transition, and if you add transition on the small_header class, the transition works only when the image shrinks.

$( ".header" ).on( "click", function() {
    $(".header").toggleClass("small_header");
});

.header {
  height: 400px;
  width: 400px;
  background: blue;
}

.header img {
  height:200px;
  -webkit-transition: all 1.7s ease;
    transition: all 1.7s ease;
}

.small_header img {
    height: 50px;
    background-size: auto 100%;    
}

.small_header {
    height: 100px;
    background-size: auto 100%;    
    -webkit-transition: all 1.7s ease;
    transition: all 1.7s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>

br3t · Answer 2 · 2016-11-14T22:22:52.267

0

It can't be animated, because CSS knows nothing about your start size of image. You should add image size for calculation of animation:

.header img {
    height: 400px;
}

edited Nov 14 '16 at 22:22

answered Nov 14 '16 at 15:13

br3t

1,646
2
20
27

score 0 · Answer 3 · answered Nov 14 '16 at 15:20

first of all, I would avoid that handling with these two classes and the "click" variable.

Your JS should look more like:

 $( ".header" ).on( "click", function() {
console.log('works');
$(".header").toggleClass("small");
});

Than your CSS should look like this:

.header {
  height: 400px;
  width: 400px;
  background: blue;
}

.small {
    height: 100px;
    -webkit-transition: all 1.7s ease;
    transition: all 1.7s ease;
}

.small img {
    height: 50%;   
    -webkit-transition: all 1.7s ease;
    transition: all 1.7s ease;
}

Second animation doesn't work correctly. I mean, when you want to make image bigger. — NeuTronas, Nov 14 '16 at 16:36

score 0 · Answer 4 · answered Nov 14 '16 at 15:31

0

Try it:-

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

answered Nov 14 '16 at 15:31

Razia sultana

2,168
3
15
20

CSS3 transition animation when adding/removing class in child elements

4 Answers4