如何用纯CSS实现子元素移除时父元素宽度变化的动画效果？

可以只用CSS完成这个宽度收缩动画效果。核心是要给父容器的宽度变化提供明确的起始和结束值，配合过渡属性和CSS选择器触发动画。

实现思路 #

• 给父容器#parent添加transition属性，定义宽度变化的动画效果；
• 用:empty选择器检测父容器是否已无子元素，此时将其宽度设为0；
• 初始状态下，父容器宽度设为fit-content，自适应子元素宽度，保证动画有明确的起始值。

完整代码示例 #

HTML

<div id="flex">
  <div id="parent">
    <div id="child" onclick="remove(this)"></div>
  </div>
  <div id="other"></div>
</div>

CSS

#flex {
  display: flex;
}

#parent {
  max-width: 200px;
  background: blue;
  border: 2px solid green;
  height: 100px;
  width: fit-content; /* 自适应子元素宽度 */
  transition: width 0.3s ease; /* 开启宽度过渡动画 */
}

/* 父容器为空时，将宽度设为0触发动画 */
#parent:empty {
  width: 0;
}

#child {
  width: 100px;
  height: 100px;
  background: red;
  cursor: pointer; /* 提示可点击 */
}

#other {
  flex: 1;
  height: 100px;
  background: yellow;
}

JavaScript

function remove(el) {
  el.remove();
}

补充说明 #

• fit-content让父容器初始宽度匹配子元素的100px，为动画提供明确的起始值；
• transition属性控制动画的时长和缓动曲线，这里设置的是0.3秒的平滑过渡；
• :empty选择器会在父容器内所有子元素被移除时生效，将宽度改为0，触发过渡动画；
• 目前主流浏览器都支持fit-content和:empty属性，兼容性无需担心。

内容的提问来源于stack exchange，提问作者lijeles952