如何使用 CSS 变换伪造宽度动画？

Question

我正在尝试设置侧边菜单的宽度动画，以便菜单 "collapses"，但我运行受到一些限制：

我希望菜单在折叠时仍显示最左边的 20 像素，这样您就可以看到菜单的 "affordance"。
我想避免对菜单的 width 进行动画处理，因为我想避免内容重排。（我设法通过在菜单中放置一个全宽容器来规避这个问题，这样内部内容就会溢出，而不是重新排列到菜单的大小）。
我想使用 CSS 变换，这样 transition 可以进行 GPU 加速和高性能处理，插值也很流畅（同时也可以避免代价高昂的回流）。

这是菜单的初始状态：

这是我希望达到的最终状态：

使用 transform: translateX(-Npx) 的警告是菜单的剩余功能是最右边的，而不是我在左侧显示的 'dots'。我希望我可以在菜单栏顶部有一个遮罩，我可以在菜单上移动它以隐藏其内容，但我相信 CSS.

中不存在该遮罩

对于如何伪造这种宽度的动画，最好使用 CSS 变换，您有什么想法吗？

非常感谢！

更新： 我创建了这个 fiddle 我有： https://jsfiddle.net/o437cpcc/1/ （问题是，菜单的最终应用程序可能数以百计的项目，更多的文字，使宽度过渡非常滞后。）

另一种 fiddle 是变换方法，在内部使用数百个 DOM 节点进行测试时性能更高，因为它不会触发回流并且动画是 GPU 加速的：https://jsfiddle.net/vr1hnwd6/1/。（问题是，点也会移动，因为整个框都被平移了）。

Answer 1

一种可能是以相反的方式为内部 ul 设置动画。

以相反符号的翻译开始，以零翻译结束

html, body {
    margin:0;
    padding:0;
    height:100%;
}

#menubar {
    width: 400px;
    -webkit-transform: translateX(-370px);
            transform: translateX(-370px);    
    background-color: #DDDDDD;
    height:100%;
    overflow:hidden;
    -webkit-transition: 1500ms -webkit-transform;
            transition: 1500ms transform;
}

#menubar:hover, #menubar:hover ul  {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

ul {
    -webkit-transform: translateX(370px);
            transform: translateX(370px);    
    -webkit-transition: 1500ms -webkit-transform;
            transition: 1500ms transform;
    width: 400px;
    margin:0;
    padding:0;
    list-style-type: none;
}

ul li {
    width: 100%;
    box-sizing: border-box;
    padding: 25px 10px;
    background-color: #C6C6C6;
    font-family: sans-serif;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom:3px;
    cursor:pointer;
}

ul li:hover {
    background-color: #D6D6D6;
}

ul li .dot {
    width:10px;
    height:10px;
    border-radius:10px;
    background-color: teal;
}

ul li .title {
    margin-left:15px;
}

<div id="menubar">
    <ul>
        <li><div class="dot"></div><div class="title">Item example</div></li>
        <li><div class="dot"></div><div class="title">Item example</div></li>
        <li><div class="dot"></div><div class="title">Item example</div></li>
        <li><div class="dot"></div><div class="title">Item example</div></li>
        <li><div class="dot"></div><div class="title">Item example</div></li>
        
    </ul>
</div>

如何使用 CSS 变换伪造宽度动画？

How to fake width animation with CSS transform?

html

css

css-transitions