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

最新推荐文章于 2025-05-29 09:01:31 发布

小雍雍

最新推荐文章于 2025-05-29 09:01:31 发布

阅读量808

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 样式CSS 文章标签： vue.js javascript css3

本文链接：https://blog.youkuaiyun.com/yongyafang123/article/details/129350571

vue 同时被 2 个专栏收录

29 篇文章

订阅专栏

样式CSS

11 篇文章

订阅专栏

这是一个使用Vue.js编写的模板，包含一个点击动画效果。点击事件触发时，`collapseShow`数据绑定值会切换，控制显示内容的显示与隐藏，同时更新`collapseFucBtnStatus`来改变动画方向。CSS动画关键帧`ll`和`oo`定义了左右移动的效果，而`show_view`则用于内容的淡入淡出动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

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