前端页面左右布局,点击左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>
相关推荐
hahala2333几秒前
ESLint 提交前校验技术方案
前端
夕水22 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了25 分钟前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder33 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->43 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo1 小时前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末1 小时前
React——基础
前端·react.js·前端框架
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端