关于【packUp】左右展开收起过渡动画组件

实现效果：

展开时：

收起时：

1.整个应用页面采用弹性盒布局，左边容器的宽度固定px，右边容器宽度为 flex:1。

<div class="current-page"> 
    // 引入组件     
    <pack-up>         
        <div>我是文字文字文字</div>     
    </pack-up>      
    <div class="right">         
        右边的数据数据数据数据      
    </div>   
</div>

css：

.current-page{   
    width: 100%;   
    height: 100%;   
    display: flex; 
} 
.left{   
    width: 500px;
} 
.right{   
    flex: 1; 
}

2.关于组件

<div class="curr-contents" ref="outerDiv">     
    <div class="show-areas" v-show="openflags">       
    <!-- 内容插槽 -->       
    <slot></slot>     
    </div>     
    <div class="pack-ups" ref="packUps" @click="handlePack">      
    <i class="el-icon-arrow-right"></i>     
    </div>   
</div>

css:

.curr-contents{     
    width: 500px;    
    height: 100%;    
    position: relative;  
    background: lightpink;  
    transition: all .5s ease-in-out; 
    padding: 0 10px;  
    /* transition: height .3s; */  
}  
.curr-contents .pack-ups{  
    height: 100%;    
    background: lightcyan;  
    position: absolute;  
    right: 0;  
    top: 0;  
    display: flex;
    justify-content: center; 
    align-items: center;   
    cursor: pointer;  
    transition: all .5s ease-in-out; 
}   
.show-areas{   
    transition: all .5s ease-in-out; 
}

核心js代码：

// 点击展开 折叠
handlePack(){   
    this.openflags=!this.openflags   
    const liCon = this.$refs.outerDiv  
    let packUps=this.$refs.packUps 
if (this.openflags) { 
    // 展开  
    liCon.style.width = 'auto'  
    liCon.style.width = this.liConWidth + 'px'  
    packUps.style.position='absolute' 
    packUps.style.left='auto'   
    packUps.style.right='0' 
} else { 
    // 收起   
    liCon.style.width = 0 + 'px'    
    packUps.style.position='absolute'  
    packUps.style.right='auto' 
    packUps.style.left='0' 
    } 
}

利用v-show使得被折叠的内容不被销毁，缓存之前的数据

也可以用font-size:0来隐藏内容区

3.完整代码：

<template>   
<div class="current-page">  
    <pack-up>     
        <div>我是文字文字文字</div>    
    </pack-up>   
    <div class="right">     
        右边的数据数据数据数据    
    </div> 
</div> 
</template>

<script> 
import packUp from "./component/packUp"
export default {  
    name:'',  
    components:{ packUp }, 
    data(){    
        return{} 
    },   
    mounted(){},  
    methods:{} 
    } 
    </script> 
    <style scoped>
        .current-page{ 
        width: 100%; 
        height: 100%; 
        display: flex;
    } 
    .left{  
        width: 500px;
    } 
    .right{ 
        flex: 1; 
    } 
    </style>

子组件：

<template>   <div class="curr-contents" ref="outerDiv">     <div class="show-areas" v-show="openflags">       <!-- 内容插槽 -->       <slot></slot>     </div>     <div class="pack-ups" ref="packUps" @click="handlePack">       <i class="el-icon-arrow-right"></i>     </div>   </div> </template> <script> export default {   name:'',   data() {     return {       liConWidth:500, // 左边容器的宽度       openflags:true,     }   },   methods: {     // 点击展开 折叠     handlePack(){       this.openflags=!this.openflags       const liCon = this.$refs.outerDiv       let packUps=this.$refs.packUps       if (this.openflags) { // 展开         liCon.style.width = 'auto'         liCon.style.width = this.liConWidth + 'px'         packUps.style.position='absolute'         packUps.style.left='auto'         packUps.style.right='0'       } else { // 收起         liCon.style.width = 0 + 'px'         packUps.style.position='absolute'         packUps.style.right='auto'         packUps.style.left='0'       }     }   } } </script> <style scoped>  .curr-contents{     width: 500px;     height: 100%;     position: relative;     background: lightpink;     transition: all .5s ease-in-out;     padding: 0 10px;     /* transition: height .3s; */   }   .curr-contents .pack-ups{     height: 100%;     background: lightcyan;     position: absolute;     right: 0;     top: 0;     display: flex;     justify-content: center;     align-items: center;     cursor: pointer;     transition: all .5s ease-in-out;   }   .show-areas{     transition: all .5s ease-in-out;   } </style>

转载请标明原作者

不喜勿喷，欢迎补充~~