CODEWITHSUNDEEP
javascriptjqueryhtmlcss
NeuTronas
NeuTronas

Reputation: 273

CSS3 transition animation when adding/removing class in child elements

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?

Upvotes: 1

Views: 2619

Answers (4)

br3t
br3t

Reputation: 1658

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

Upvotes: 0

Razia sultana
Razia sultana

Reputation: 2211

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

Upvotes: 0

Germano Plebani
Germano Plebani

Reputation: 3625

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>

Upvotes: 3

Alexander Voss
Alexander Voss

Reputation: 57

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

Upvotes: 0

Related Questions