Vue.js 过渡后的 vif 下方的过渡元素

发布于01月24日

我有两个元素，顶部元素的可见性由一个简单布尔值上的v-if控制.

transition(name="fade")
    #element1(v-if="showFirst")
        p Foo

#element2
    p Bar

第一个元素被包装在<transition>标签中，与Vue documentation标签完全相同.

然而，虽然这确实会创建一个渐弱的动画，但页面上的其他内容仍然跳得非常刺耳.

我如何才能创建一个过渡，也将顺利地改变任何和所有sibling 姐妹的地位，跟随？

fiddle人演示了这个问题.

推荐答案

您需要使用transition-group键，并输入动态div和静态div

<transition-group name="fade">
  <div v-if="switc" key="dynamic" class="animated">
     ...
  </div>
  <div key="main-content" class="animated">
     ...
  </div>
</transition-group>

并使用这个css类

.fade-enter,
.fade-leave-active {
    opacity: 0;
    transform: translateY(-10px);
}
.fade-leave-active {
    position: absolute;
}

.animated {
  transition: all 0.5s;
  /*display: flex;*/
  width: 100%;
}

真正的诀窍是在离开时将position改为absolute，然后任何其他内容都可以占据正确的位置.

要了解更多有关Vue如何制作动画的信息，请参阅本FLIP explanation post页

请看这把小提琴

Edit

我错误地在.animated类中设置了display: flex;，这导致每个内部元素都以一种奇怪的方式呈现.

现在，我完全删除了.animate类，而将transition: all 0.5s和width:100%应用于.wrapper的每个直接内部元素

我的最终SCS如下所示:

.wrapper {
  display: flex;
  flex-direction: column;
  >* {
    transition: all 0.5s;
    width:100%;
  };
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-leave-active {
  position: absolute;
}

Flex布局是一个扩展主题，但简而言之，对于这个特殊情况，flex-direction: column是一个一个地排列元素.

如果其中一个元素具有绝对位置，则在flex布局中将被忽略，以便在可用空间上重新分配任何其他元素.

请看关于flexbox的guide篇文章和最后一篇working fiddle篇文章，希望能有所帮助.