Question

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

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

#element2
    p Bar

第一个元素包含在<transition>标记中，完全符合Vue documentation。

然而，虽然这会创建一个褪色动画，但页面上的其他内容仍然会非常刺激。

如何创建一个过渡，也可以平滑地改变后面任何兄弟姐妹的位置？

演示此问题的fiddle。

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 explanation post

请看这个工作小提琴 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布局中将被忽略，因此任何其他元素将在可用空间中重新分配。

请参阅此guide有关flexbox的信息，最后working fiddle希望它有所帮助。

Answer 2

您可以使用slideDown / slideUp动画。为了达到这个目的，你不需要知道滑动元素的高度，max-height转换的原则解释为there。

因此，它会导致元素的动画移动低于目标。

根据您的小提琴查看我的example。

Answer 3

vue js提供了不同的transition classes，您必须正确使用这些来平滑转换，我已经尝试使用一些CSS在此fiddle中使用您的示例，看看。

.fade-enter-active, .fade-leave-active {
  transition: all .5s;
  height: 100px;
  opacity: 0.5;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  height: 0px;
  opacity: 0;
}

来自文档的

一些细节：

有六个类用于进入/离开过渡。

v-enter：输入的开始状态。在插入元素之前添加，在插入元素后删除一帧。
v-enter-active：输入的活动状态。在整个进入阶段应用。在插入元素之前添加，在转换/动画完成时删除。此类可用于定义输入转换的持续时间，延迟和缓动曲线。
v-enter-to：仅适用于版本＆gt; = 2.1.8。结束进入的状态。插入元素后添加一帧（同时删除v-enter），在转换/动画结束时删除。
v-leave：休假的起始状态。触发离开转换时立即添加，在一帧后删除。
v-leave-active：休假的活跃状态。在整个离开阶段应用。在触发离开转换时立即添加，在转换/动画结束时删除。此类可用于定义离开过渡的持续时间，延迟和缓动曲线。
v-leave-to：仅适用于版本＆gt; = 2.1.8。结束休假状态。在触发离开转换后添加一帧（同时删除了v-leave），在转换/动画结束时删除。

您也可以使用CSS animations在不同的转换阶段提供哪些css属性，以使转换更加顺畅，例如关注和演示fiddle：

.fade-enter-active {
  animation: bounce-in .5s;
}
.fade-leave-active {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% {
    height: 5px;
  }
  30% {
    height: 30px;
  }
  50% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}
@keyframes bounce-out {
  0% {
    height: 90px;
    }
  50% {
    height: 50px;
  }
  100% {
    height: 0px;
  }
}

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

3 个答案: