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:-stackoverflow.com/questions/7302824/… — Razia sultana
– Razia sultana, Commented Nov 14, 2016 at 15:31

Germano Plebani · Accepted Answer · 2016-11-14 15:26:53Z

3

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>

edited Nov 14, 2016 at 15:26

answered Nov 14, 2016 at 15:15

Germano Plebani

3,6753 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander Voss · Accepted Answer · 2016-11-14 15:20:55Z

0

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;
}

answered Nov 14, 2016 at 15:20

Alexander Voss

574 bronze badges

1 Comment

NeuTronas Over a year ago

Second animation doesn't work correctly. I mean, when you want to make image bigger.

Razia sultana · Accepted Answer · 2016-11-14 15:31:51Z

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, 2016 at 15:31

Razia sultana

2,2513 gold badges18 silver badges21 bronze badges

Comments

br3t · Accepted Answer · 2016-11-14 22:22:52Z

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, 2016 at 22:22

answered Nov 14, 2016 at 15:13

br3t

1,6582 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

CSS3 transition animation when adding/removing class in child elements

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related