Animation 动画侧导航菜单：如何避免跳转布局？

我想创建一个动画

问题是，在打开和关闭项时，“跳转”（仅在包含多个单词的菜单项上）。我怎样才能防止这种情况

看起来真的很难看。我希望菜单显示时不带布局跳转

示例

以下代码来自w3schools。这只是为了举例说明

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

动画侧导航示例
单击下面的元素打开侧面导航菜单

☰ 打开
函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}

要执行此操作，请释放宽度，将框从页面上推出，然后将其向后拉。因此，动画将看起来流畅和专业

相关CSS属性：

transform: translateX (...)

您可以在我的代码段中测试更改。我在代码段中指定了更改点。祝你好运

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
/*更改*/宽度：250px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
/*添加*/转换：translateX（-100%）；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

动画侧导航示例
单击下面的元素打开侧面导航菜单

☰ 打开
函数openNav（）{
document.getElementById（“mySidenav”）.style=“transform:translateX（0）”；//已更改
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style=”“；//已更改
}

带有

transform:translateX的动画与带有
左边距的动画之间有什么区别（添加负边距）。什么更好？为什么？
margin
自较旧的css版本以来就存在了。虽然转换不是很新，但它对于
边距
来说是新的。但是，
margin
也会影响元素的其他元素。但是
transform
不会影响其他元素。因此，应用
transform
不需要将元素设置为
absolute
或
fixed
。哪一个应该优先考虑取决于具体情况。但在像您这样的示例中，通常使用
转换
。