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

總結

以上是生活随笔為你收集整理的vue animation css实现左右折叠面板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。