在元素上设置Vuejs过渡，让其他元素出现

Question

这不是问题，但更多的是一个"如何"；在这里假设我有这样的模板(id只是为了更清晰(：

<template>
<div id="1" v-if="someCondition"></div>
<div id="2"></div>
<div id="3"></div>
</template>

当someCondition为false时，将仅呈现具有id="2"和id="3"的div。虽然我理解如何在条件元素id="1"上添加这样的转换：

<template>
<transition name="..."
<div id="1" v-if="someCondition"></div>
</transition>
<div id="2"></div>
<div id="3"></div>
</template>

我如何使另外两个div(id="2"和id="3"(平稳移动，让到id="1"的位置出现，并且只有在该位置出现后才能进行其出现的转换(当someCondition变成true时(？

因为目前，id="2"和id="3"向下移动(或者如果id="1"因为someCondition再次转到false而消失，则向上移动(，而没有任何转换，这非常难看。

https://jsfiddle.net/nyaf2jxz/

Answer 1

您可以转换max-height属性以使其看起来更平滑：

new Vue({
el: "#app",
data() {
return {
show: false
}
},
methods: {
toggleElement() {
this.show = !this.show
}
}
})

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
#one {
background-color: aquamarine;
}
#two {
background-color: red;
}
#three {
background-color: green;
}
.fade-enter-active,
.fade-leave-active {
max-height: 100px;
transition: opacity 1.5s 0.2s, max-height 1.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
max-height: 0px;
transition: opacity 1.5s, max-height 0.8s 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<transition name="fade" duration="2000">
<div id="one" v-if="show">
This is conditional div
</div>
</transition>
<div id="two">
This is second div
</div>
<div id="three">
This is third div
</div>
<button @click="toggleElement()">
Toggle Element
</button>
</div>

只需将其设置为高于div的值，在本例中为100px。

如果你必须考虑margin和padding，你可以延迟将它们设置为0，这样你就不会注意到它们已经更改：

new Vue({
el: "#app",
data() {
return {
show: false
}
},
methods: {
toggleElement() {
this.show = !this.show
}
}
})

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
#one {
background-color: aquamarine;
padding: 20px;
margin: 0px;
}
#two {
background-color: red;
}
#three {
background-color: green;
}
.fade-enter-active,
.fade-leave-active {
max-height: 1000px;
transition: opacity .5s, max-height .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
max-height: 0px;
padding: 0 !important;
margin: 0 !important;
transition: opacity .5s, max-height .5s, padding .1s .4s, margin .1s .4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<transition name="fade" duration="500">
<div id="one" v-if="show">
This is conditional div
</div>
</transition>
<div id="two">
This is second div
</div>
<div id="three">
This is third div
</div>
<button @click="toggleElement()">
Toggle Element
</button>
</div>

只需确保CSS转换的持续时间和延迟加起来就是Vue过渡的持续时间。