裁剪一个滑动 div答案

【问题标题】：Crop a sliding div裁剪一个滑动 div
【发布时间】：2020-06-09 00:10:05
【问题描述】：

我正在尝试为菜单设置一个水平滑动的 div，有一个始终可见的左侧 DIV，以及一个在激活菜单时水平滚动的滑动 DIV。我的 html 看起来像这样。

<div id="app-menu">
  <div id="menu_left">
    <img src="menu_left.png" />
  </div>
  <div id="menu_slider" class="menu-content">
    <img src="menu_1.png" />
    <img src="menu_2.png" />
    <img src="menu_3.png" />
  </div>
</div>

滑块使用一些 CSS 进行动画处理，如下所示

    .menu-content {
        position: fixed;
        height: 175px;
        left: -606px;
        top: 35px;
        overflow-x: hidden;
        overflow-y: hidden;
        transition: ease-in-out 400ms left;
    }

    .menu-content-opened {
        left: 125px;
        transition: ease-in-out 600ms left;
    }

menu_slider DIV 类在 menu_left DIV 上的单击事件中在 menu-content 和 menu-content-opened 之间切换。这一切都很好。

但我的 menu_left DIV 包含一个带有 alpha 通道和一些透明区域的图像 menu_left.png。当我的 menu_slider div 向左滑入 menu_left DIV 后面时，我可以看到 menu_slider DIV 后面的 menu_left DIV 的内容。

我想做的是让 menu_slider DIV 向左滑动，但在 menu_left DIV 后面不可见，即以某种方式裁剪它。我可以用页面背景颜色填充 PNG 的透明区域，但我不想这样做。我正在使用 Angular 6、Typescript 和 .less 样式文件。

有什么想法吗？

【问题讨论】：

标签： html css angular typescript less

【解决方案1】：

您可以为max-width 设置动画，而不是为left 设置动画。我想不出更好的方法，因为具有透明度的重叠层总是会混合在一起。

这是一个工作示例：

	const menuDiv = document.getElementById('menu_left');
  	menuDiv.addEventListener('click', () => {
    	let slider = document.getElementById('menu_slider');
      slider.classList.add('menu-content-opened');
      console.log('clicked');
    });

    .menu-content {
        position: fixed;
        height: 175px;
        left: 120px;
        max-width: 0;
        /* left: -606px; */
        top: 35px;
        overflow-x: hidden;
        overflow-y: hidden;
        transition: all ease-in-out 400ms;
    }

    .menu-content-opened {
        max-width: 600px;
    }
    #menu_left {
      background: gray;
      width: 100px;
    }

<div id="app-menu">
  <div id="menu_left">
    <img src="https://pngimage.net/wp-content/uploads/2018/06/png-transparent-background-2.png" alt="MENU LEFT"/>
  </div>
  <div id="menu_slider" class="menu-content">
    <img src="menu_1.png" alt="menu 1" />
    <img src="menu_2.png" alt="menu 2"/>
    <img src="menu_3.png" alt="menu 3"/>
  </div>
</div>

【讨论】：

我试过了，随着宽度的增加，菜单 1、菜单 2 和菜单 3 垂直堆叠，然后随着宽度的增加变为水平。我希望菜单图像在出现时始终是水平的。
@daveD 添加到 css: .menu-content img { display: block; } 以便任何 img 元素将占用该类中所有可用的宽度空间。

【解决方案2】：

一种选择是在点击事件上更改 ID 为 #menu_slider 的 div 的 display。您需要将 css 代码从 {display: none;}“切换”到 {display: block;}，反之亦然。

【讨论】：