Question

我有一个问题，即在向父级添加类时，CSS3过渡对子元素不起作用。

图像无法获得动画，并立即达到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类上添加转换，则转换仅在图像缩小时起作用。

＆＃13;

TRUE

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

它无法动画，因为CSS对图像的起始大小一无所知。您应该添加图像大小以计算动画：

.header img {
    height: 400px;
}

Answer 3

首先，我会避免使用这两个类和＆＃34;点击＆＃34;变量。

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

在子元素中添加/删除类时的CSS3过渡动画

4 个答案: