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

【问题标题】：CSS3 transition animation when adding/removing class in child elements在子元素中添加/删除类时的 CSS3 过渡动画
【发布时间】：2017-03-28 06:39:34
【问题描述】：

当向父级添加类时，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;
    }
});

但是你可以看到图像上没有过渡动画。

如何解决？

【问题讨论】：

请查看此链接：-stackoverflow.com/questions/7302824/…

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

首先，我会避免使用这两个类和“click”变量进行处理。

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

【讨论】：

第二个动画不能正常工作。我的意思是，当你想让图像更大时。

【解决方案3】：

试试看：-

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

【讨论】：

【解决方案4】：

它不能被动画化，因为 CSS 对你的图像的起始尺寸一无所知。您应该添加图像大小以计算动画：

.header img {
    height: 400px;
}

【讨论】：