前端页面左右布局,点击左div增加动画过渡效果

效果图如下

以下代码基于Vue2

javascript 复制代码
<template>
  <div class="container">
    <div class="left-section" :style="{ width: widthLeft + 'vw' }" @click="toggleRightSection"></div>
    <div class="right-section" :style="{ width: (100 - widthLeft) + 'vw' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      widthLeft: 60  // 左侧初始宽度
    };
  },
  methods: {
    toggleRightSection() {
      // 切换宽度
      if (this.widthLeft === 60) {
        this.widthLeft = 100;  // 隐藏右侧盒子
      } else {
        this.widthLeft = 60;  // 显示右侧盒子
      }
    }
  }
};
</script>

<style>
.container {
  display: flex;
  height: 80vh;
  overflow: hidden;
}

.left-section {
  transition: width 0.3s ease-in-out;
  background-color: #e0e0e0;
  padding: 20px;
}

.right-section {
  transition: width 0.3s ease-in-out;
  background-color: #c0c0c0;
  /* padding: 20px; */
}
</style>
相关推荐
江城开朗的豌豆几秒前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼10 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子12 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆12 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了13 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆18 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆19 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆19 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆20 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er27 分钟前
【前端工程化】前端组件模版构建那些事
前端