裁剪滑动div

Question

我正在尝试为菜单设置水平滑动的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上的click事件中在打开菜单内容和打开菜单内容之间切换。这一切都很好。

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

我想做的是将menu_slider DIV幻灯片滑入左侧，但在menu_left DIV后面不可见，即以某种方式进行裁剪。我可以用页面背景色填充PNG的透明区域，但我宁愿不这样做。我正在使用Angular 6，Typescript和.less样式文件。

请问有什么想法吗？

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

Answer 2

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