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

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

    
    
    
    
    


    

        

            

                
tab1
                
tab2
                
tab3
                
tab4
                
tab5
            
        
        

            

                

                    
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