vue 自己编写 左侧展示隐藏菜单栏 如collapse类似

直接上代码：

<template>
  <div class="search_page_list">
   <div class="click_animation" :class="collapseFucBtnStatus=='1'?'click_animation2':collapseFucBtnStatus=='2'?'click_animation1':''" @click="screen_click">{{collapseFucBtnStatus=='1'?'关闭动画':'打开动画'}}</div>
   <transition name="show_view">
    <div v-show="collapseShow" class="screen_cent" transiton="show_view">
     <div class="lalla">
         <span class="">关sdagsadgsdag闭</span>
     </div>
    </div>
   </transition>
  </div>

</template>
<script>
export default {
 
  data () {
    return {
      collapseShow: false,
      collapseFucBtnStatus: '',
    }
  },
    methods: {
      screen_click() {
        this.collapseShow = !this.collapseShow;
        this.collapseFucBtnStatus = this.collapseShow?'1':'2'
      }  
    }
}
</script>
<style scoped lang="less">
.search_page_list {
    padding-top: 117px;
    width: 100%;
    height: 100vh;
   }
    .click_animation {
        position: relative;
        cursor: pointer;
    }
    .click_animation2 {
        animation: ll 0.25s ease;
        left: 280px;
    }
    .click_animation1 {
        animation: oo 0.25s ease;
        left: 0px;
    }
    @keyframes ll {0% {left: 0; } 100% {left: 280px;}}
    @keyframes oo {0% {left: 280px;} 100% {left: 0; }}
   .screen_cent {
    width: 280px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0;
    z-index: 3000;
    // border-radius: 0 10px 10px 0;
    overflow: hidden;
    background: #ccc;
   }
   .show_view-enter {
    animation: show_view-dialog-fade-in 0.25s ease;
   }
   .show_view-leave {
    animation: show_view-dialog-fade-out 0.25s ease forwards;
   }
   .show_view-enter-active {
    animation: show_view-dialog-fade-in 0.25s ease;
   }
   .show_view-leave-active {
    animation: show_view-dialog-fade-out 0.25s ease forwards;
   }  
   @keyframes show_view-dialog-fade-in {
    0% {transform: translateX(-280px);}
    100% {transform: translateX(0px);}
   }
   @keyframes show_view-dialog-fade-out {
    0% {transform: translateX(0px);}
    100% {transform: translateX(-280px);}
   }
   
</style>