添加/刪除子元素中的類時的CSS3過渡動畫

Question

當向父元素添加類時，我有一個問題，即CSS3過渡對子元素無效。

這裏是我的代碼： http://jsfiddle.net/4zwg3/327/

圖片沒有得到動畫瞬間變爲50像素高度。

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

首先，我會避免與這兩個類和「點擊」變量處理。

你的JS應該更像：

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

比你的CSS應該是這樣的：

.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

嘗試： -

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