在过渡的v-if下面的过渡元素

Question

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

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

#element2
    p Bar

第一个元素包含在<transition>标记中,完全按照Vue文档.

然而,虽然这确实创建了一个褪色动画,但页面上的其他内容仍然非常刺耳.

我怎样才能创建一个过渡,也可以顺利地改变后面任何和所有兄弟姐妹的位置？

演示此问题的小提琴.

Answer 1

你需要使用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说明帖子

请看这个工作小提琴 https://jsfiddle.net/bjfhth7c/4/

编辑

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

所以,现在,我彻底清除.animate类,而是应用transition: all 0.5s和width:100%对每一个直接内部元件.wrapper

我最后的scss看起来像这样:

.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和最后的工作小提琴希望它有所帮助.