登录
首页 >  文章 >  前端

CSS 动画无法响应高度变化,如何实现盒子高度平滑过渡?

时间:2024-11-14 11:33:50 419浏览 收藏

大家好,今天本人给大家带来文章《CSS 动画无法响应高度变化,如何实现盒子高度平滑过渡? 》,文中内容主要涉及到,如果你对文章方面的知识点感兴趣,那就请各位朋友继续看下去吧~希望能真正帮到你们,谢谢!

CSS 动画无法响应高度变化,如何实现盒子高度平滑过渡?

CSS 过渡动画无法响应高度变化

如题中所述,当 p 标签展开时,盒子高度被撑起,但未应用指定的平滑过渡动画。这是因为 CSS 动画不支持高度为 auto 的元素。

解决方案

要实现盒子高度变化时的过渡动画,可以采用以下方式:

  1. 使用 JavaScript 获取盒子实际高度 autoH。
  2. 使用 CSS 设置 overflow:hidden,防止盒子内容溢出。
  3. 使用 transition 属性设置动画。
  4. 使用 JavaScript 在点击按钮时切换盒子高度,使其在 0 和 autoH 之间变化。

代码示例

.box {
  background-color: blue;
  overflow: hidden;
  transition: all 1s;
}
const autoH = $('.box').height();
let h = 0;
$('.box').height(0);
$('.button').click(function() {
  $('.box').height(h ^= autoH);
});

通过这些步骤,可以实现盒子高度变化时的平滑过渡动画。

理论要掌握,实操不能落!以上关于《CSS 动画无法响应高度变化,如何实现盒子高度平滑过渡? 》的详细介绍,大家都掌握了吧!如果想要继续提升自己的能力,那么就来关注golang学习网公众号吧!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>