为什么过渡结束后不保持状态？答案

【问题标题】：Why isn't the state of a transition maintained once it ends?为什么过渡结束后不保持状态？
【发布时间】：2017-06-05 04:51:51
【问题描述】：

我想稍微扩展basic example for transitions，让一个元素在一个div 中淡出，同时在另一个上淡入：

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-show="show">hello</p>
  </transition>
  <transition name="fade">
    <p v-show="!show">hello</p>
  </transition>
</div>

然而这并没有按预期工作：上面的hello 淡出，下面的淡入（到目前为止还可以），但是下面的那个消失了，上面的出现了（立即，好像状态已经改变了并且没有过渡）。

再次单击该按钮时，过渡看起来是正确的（它从下方的hello 淡出和上方的淡入开始）。

CSS是对称的，只有在按下按钮时状态才会改变-所以我不明白第一次转换后立即切换？

【问题讨论】：

第二个不会消失 - 它只是跳到顶部，当第一个元素的不透明度 = 0 时（第一个元素完全消失并且它的空间变空）。在 div 中制作不同的文本以查看它。

标签： vue.js

【解决方案1】：

v-show 通过设置display CSS 属性来隐藏元素，如the documentation 所述：

v-show 只是切换元素的display CSS 属性。

这具有在转换完成后元素消失的效果，即设置display 属性时。带有display: none 的元素完全隐藏，不占用任何空间。

你看到的效果不是对称的，因为隐藏元素时，在过渡结束时设置了display属性，但是当再次显示元素时，需要在过渡开始时设置（否则过渡会不可见） .

如果你想避免这种位置变化，你必须一直保持元素在计算的布局中，所以你不能使用display: none来隐藏它，而必须使用不同的方式。这也意味着您不能为此使用v-show。

您可以做的只是使用 CSS 过渡和不同 opacity 状态之间的过渡：

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fading-element {
    transition: opacity 2s;
}
.invisible {
    opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="demo">
  <button v-on:click="show = !show">Toggle</button>
  <p :class="['fading-element', { 'invisible': !show }]">hello</p>
  <p :class="['fading-element', { 'invisible': show }]">hello</p>
</div>

【讨论】：