html 隐藏内容的几种方式(包括css,js)

所说的动画均为 css 动画

1.display:none

特点:出现在文档树中，不占用空间，显示时候（如 display:block）需要重绘，无法动画

2 visiblity:hidden

特点:出现在文档树中，占用空间，显示时候不需要重绘，半程动画(显示时候没有，消失的时候依然没有动画，但是会等待transition时间)

3，text-indent:-100%（需要搭配overflow:hidden）

特点:出现在文档树中，占用空间，显示时候不需要重绘，可以动画

4 height:0（需要搭配overflow:hidden）

特点:出现在文档树中，占用最小空间，显示时候不需要重绘，无法动画

5 opapcity:0

特点:出现在文档树中，占用空间，显示时候不需要重绘，可以动画

6,js removeChild

特点:不出现在文档树中,不用空间，显示时候需要重绘，无法动画

总结

彻底不显示如display:none visiblity:hidden removeChild 都没有动画

height:0 只占用最小空间，虽不会重绘，但是会重新排版