CSS 转换 vs jQuery .animation() vs JS 切换类？

Question

我是一个尝试创建动画移动菜单的新手，我想知道是否有更好的方法。

我的导航菜单位于 <ul> 中，默认情况下 隐藏在屏幕外 (right: -100vw) 并且我有一个未使用的类 .open，它具有规则right: 0。我的 transition-delay 中的每个 <li> 也有一个唯一的 <ul>。

所以，

ul { right: -100vw; transition:right 1s; }
.open { right: 0; }
li:nth-of-type(2) { transition-delay: 0.5s; }

当用户点击 mobile-menu-hamburger-icon时，在.open上切换类<ul>。

它起作用了，但我不确定这是否是最好的方法。我认识到我可以采用创建 CSS 动画 (@keyframes) 并通过 JS 在汉堡单击时触发它的方法。或者，我也可以使用 jQuery 的 animate() 来完成所有工作。

希望听到想法或指导！

Answer 1

由于它只是一个状态变化（right 值），所以您只能使用 transition。 它在动画中也是可行的，但它只会添加更多可以以更简单方式实现的代码行。动画只是过渡的抽象，两者都使用硬件加速，因此不会有任何性能差异。