<div class="left" :class="boxshow ? 'a1': 'a2'" id="showBox">这里是折叠面板的内容
</div>
<i id="left" class="el-icon-d-arrow-left" @click="boxshow = !boxshow" :class="boxshow ? 'a3': 'a4'"></i>
<i id="right" class="el-icon-d-arrow-right" @click="boxshow = !boxshow" :class="boxshow ? 'a5': 'a6'"></i>

boxshow: true

watch: {boxshow(val){if(!val){// 要确定渲染完了才可以读取dom节点setTimeout(() => {document.getElementById('showBox').style.display = 'none'document.getElementById('left').style.display = 'none'document.getElementById('right').style.display = 'block'}, 1800)}else{document.getElementById('showBox').style.display = 'block'document.getElementById('left').style.display = 'block'document.getElementById('right').style.display = 'none'}}},

.left{// 动画显示的最大宽度width: 230px;
}
// 面板内容显示隐藏动画
@keyframes out1{0%   {width: 230px;opacity: 1;}25%  {width: 150px;opacity: 0.8;}50%  {width: 100px;opacity: 0.6;}75%  {width: 50px;opacity: 0.3;}100% {width: 0px;opacity: 0;}
}
@keyframes in1{0%   {width: 0px;opacity: 0;}25%  {width: 50px;opacity: 0.3;}50%  {width: 100px;opacity: 0.6;}75%  {width: 150px;opacity: 0.8;}100% {width: 230px;opacity: 1;}
}
.a1{animation: in1 2s linear;
}
.a2{animation: out1 2s linear;
}
// 按钮显示隐藏动画  16px 是 按钮的宽度
@keyframes l1{0%   {width: 0px;left: 0px;opacity: 0;}50%  {width: 10px;left: 100px;opacity: 0.5;}100% {width: 16px;left: 250px;opacity: 1;}
}
@keyframes l2{0%   {width: 16px;left: 250px;opacity: 1;}50%  {width: 10px;left: 100px;opacity: 0.5;}100% {width: 0px;left: 0px;opacity: 0;}
}
@keyframes r1{0%   {width: 0px;left: 0px;opacity: 0;}50%  {width: 10px;left: 0px;opacity: 0.5;}100% {width: 16px;left: 0px;opacity: 1;}
}
@keyframes r2{0%   {width: 16px;left: 0px;opacity: 1;}50%  {width: 10px;left: 0px;opacity: 0.5;}100% {width: 0px;left: 0px;opacity: 0;}
}
.a3{// 左进 true animation: l1 2s linear;
}
.a4{// 左出animation: l2 2s linear;
}
.a5{// 右进 false animation: r1 2s linear;
}
.a6{// 右出animation: r2 2s linear;
}
.el-icon-d-arrow-left, .el-icon-d-arrow-right{position: absolute;top: 50%;left: 250px;z-index: 99;background-color: white;height: 100px;line-height: 100px;
}
.el-icon-d-arrow-right{left: 0px;display: none;
}