关于padding动画不生效

来源：5-7 Collapse 添加动画第二部分 - 尽善尽美

weixin_精慕门3237252

2024-02-05

请问老师，padding的渐变动画不生效是因为标准盒模型的height不包括padding吗，如果这样，可以通过设置怪异盒模型来解决吗？还有一个问题，通过scrollheight获取高度，是因为scrollheight包括v-show隐藏的内容高度吗？

写回答

1回答

张轩

2024-02-05

同学你好

问题一：

是的，如果你将元素的盒模型设置为 border-box，那么 height 属性将包括元素的 padding 在内。

在 border-box 盒模型中，元素的总高度由内容区域（content）、内边距（padding）和边框（border）的高度组成。通过将元素的 box-sizing 属性设置为 border-box，你可以确保 height 属性包括内边距。

问题二

元素的 scrollHeight 属性是一个只读属性，用于获取元素内容的总高度，包括被隐藏的内容和溢出部分。它表示了元素在没有滚动条的情况下，能够完全展示其内容所需的最小高度。所以是最贴切的属性

weixin_精慕门3237252

好的，谢谢老师

2024-02-06

共1条回复

进阶必学，打造媲美ElementPlus的组件库

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库

481 学习 · 218 问题

相似问题

回答 2

回答 1

回答 3

回答 1

回答 2