使用原生实现tab切换+slideToggle效果

**问题描述:**当tab切换时,由于tab对应的内容不同,导致内容容器的高度的不同。 直接的切换显示内容显得太僵硬了,所以希望内容容器根据内容的多少实现slideToggle效果。
**解析问题:**首先一点是使用原生,意味着不能使用第三方框架。而实现slideToggle动画效果主要有两种手段, 一种是使用css3动画,另一种是javascript使用定时器实现slideToggle效果。但是使用原生js实现很繁琐,还是使用css3的方式推荐。 使用css3动画的transition属性来完成这效果,但是要注意的是使用transition的话,元素不能使用display: none;和display: block/flex/…;等进行切换。
我的实现方案是将sildeToggle动画和内容切换分离,在原来内容切换基础上,给外部容器添加transition动画;这样的话不论里面内容如何切花显示, 只需要根据内容给容器设置高度,而容器作为视口,对超过的内容进行隐藏,而高度的改变触发了transition属性。




    
    
    
    tab
    


    

1

1

1

1

1

1

1

1

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

3

3

3

3

3

3

3

3

3

3

4

4

4

4

4

4

4

4

4

4

4

4

4

4

4

4

4

4

4

4

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

你可能感兴趣的:(程序员笔记,web开发笔记)