vue transition给子节点添加动画

问题

vue弹窗组件中只能用一个transition组件包裹，但是需要分别给遮罩和插槽添加不同的动画，怎么实现呢？

如果按照scss规则这样写，不会生效

.slide-enter, .slide-leave-to {
  .slot{
    transform: translate3d(0, 100%, 0);
  }
}

解决办法

按照css的规则写就可以生效

.slide-enter .slot, .slide-leave-to .slot {
  transform: translate3d(0, 100%, 0);
}

原因

目前未知，看了一下vant的popup源码，使用jsx写的，直接最外层渲染了一个空节点，内层的overlay遮罩和slot分开渲染

return (
    <>
      {renderOverlay()}
      {renderTransition()}
    </>
);