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

布局，点击左div增加动画过渡效果"/>

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

效果图如下

以下代码基于Vue2

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