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

Posted 2023-05-08

【中文标题】在子元素中添加/删除类时的 CSS3 过渡动画

【英文标题】：CSS3 transition animation when adding/removing class in child elements

【发布时间】：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;
    
);

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

如何解决？

【问题讨论】：

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

【参考方案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;