Css过渡属性：仅变换？

Question

我想使用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有效，但不时出人意料。 短视频参考 http://screencast-o-matic.com/watch/cDlDYKQZCY

Answer 1

正如评论中所讨论的那样，您应该尽量避免使用transition: all，因为它会降低性能。尝试使用过渡尽可能具体。

此外，在启用/可用时，使用translate3d(x,y,z)代替translateX(x)将您的过渡从2D转换为3D。