<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;
}