子要素にクラスを追加/削除するときのCSS3トランジションアニメーション

Question

親にクラスを追加するときにCSS3トランジションが子要素で機能しないという問題があります。

は、ここに私のコードです： http://jsfiddle.net/4zwg3/327/

画像は、アニメーションを取得し、すぐには50px高さになっていません。

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

しかし、あなたがイメージには遷移アニメーションはありません見ることができますように。

どのように修正できますか？

Answer 1

この問題の画像は、任意の開始の高さを持っていないとあなたがsmall_headerクラスにトランジションを追加した場合、ブラウザが移行を計算し、することができないため、移行：あなたは、アニメーションの計算のために画像サイズを追加する必要があります画像が縮小する場合にのみ機能します。

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

Answer 2

CSSはイメージの開始サイズについて何も知らないので、アニメーション化することはできません。

.header img { 
    height: 400px; 
} 

Answer 3

すべての最初の、私はこの2つのクラスで取り扱うことを避けるだろうと変数を「クリック」。あなたのCSSは次のようになり必要以上

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

：

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

Answer 4

はそれを試してみてください。

あなたのJSは、より多くのようになるはずです - ：-http

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