Css转换属性：仅转换？

我想动画侧边栏与CSS过渡

.site-config
  flex: 0 1 0
  overflow: hidden
  transform: translateX(100%)
  transition: all .4s ease-in
  &.active
    flex: 2 1 40%
    transform: translateX(0)

它工作得很好，但因为flex也处于转换阶段，所以它会减慢外观并导致其他性能问题

最后，我尝试了

transition:transform.5s ease

，但它不起作用

更新

当前

transition:transform

起作用，但有时会出乎意料。 短视频参考

---

如评论中所述，您应尽量避免使用

transition:all

，因为它会降低性能。试着对你的转换尽可能具体

---

另外，使用

translate3d（x，y，z）

而不是

translateX（x）

将您的转换从2D移动到3D，以便在启用/可用时利用硬件加速。

转换：所有

都很慢，您应该准确地瞄准您要转换的内容。如果仍然存在性能问题，请尝试从

translateX

移动到

translate3d

。如果启用了硬件加速，它应该会提高性能。@按X不是3d的快捷方式吗？我认为翻译也是GPU加速的。这就是它现在在translate中的工作方式，非常出乎意料。我不知道为什么IIRCX是translate（X，y）的简写，并且仍然是2D，所以没有加速度。你是对的，它的性能要好得多。我不知道那件事。还是有点问题，但可能只是我的MB问题）