文章目录

• • 学习链接
  • 通过scrollHeight实现
  • 通过js获取auto时的高度去实现（效果不好）
  • • 优化
    • 通过grid实现

      学习链接

      vue项目列表折叠面板动画效果实现

      element-ui之el-collapse-transition（折叠展开动画）源码解析学习

      通过scrollHeight实现

      

      以下代码注意两点

      • trainsition是需要有两个值，才能产生过渡动画的，所以一开始就需要获取到box1的高度（通过scrollHeight去获取它的高度）
      • box1收缩，其实就是把它的height改为0，超出部分隐藏，这样子元素就隐藏了（但是注意，这个时候，仍然可以通过scrollHeight获取到box1的实际高度，尽管它的style的height已经是0了）

        通过js获取auto时的高度去实现（效果不好）

        

        虽然，实现效果并不怎么好，但是比较巧妙，它通过js设置height为auto，然后就可以获取元素的自然高度。这种获取高度的方式可以借鉴下

        优化

        要使用setTimeout，才能在展开的时候，有过渡效果，不然两个修改高度的js在一起，它是不会有过渡的，可能跟浏览器的渲染有关系

        通过grid实现

        

        注意下面的grid网格布局是加给外面的这个容器，外面这个容器从0fr到1fr会产生动画。overflow:hidden是加给里面的这个div。这样就能实现从0->auto的高度变化过渡效果。

        
        
        
            
            
            
            
            
        
        
            
        
                
        
                    this is amazing!
                    this is amazing!
                    this is amazing!
                    this is amazing!
                    this is amazing!
                    this is amazing!
                    this is amazing!
                    this is amazing!
                
            
            
            
        
            	[一段很长的文字Lorem1000]