Question

我想略微扩展basic example for transitions，并在一个div中淡出一个元素，同时淡化另一个元素：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

然而，这不会按预期工作：上部hello淡出而下部逐渐消失（到目前为止正常），但随后下部消失并且上部消失（紧接着，就像状态一样）已经改变，没有过渡。）

再次单击按钮时，看起来过渡是正确的（它从较低的hello淡出开始，而较高的淡入淡出）。

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

Answer 1

v-show按display所述的v-show CSS属性设置隐藏元素：

display只需切换元素的display CSS属性。

这会导致元素在转换完成后消失，即设置display: none属性时。具有display: none的元素被完全隐藏，而元素没有占用任何空间。

您看到的效果不是对称的，因为隐藏元素时，显示属性在转换结束时设置，但是当再次显示元素时，需要在转换开始时设置（否则转换将不可见）

如果您想避免更改位置，则必须始终将元素保留在计算的布局中，因此您无法使用v-show隐藏它，但必须使用不同的方式。这也意味着您无法使用opacity。

您可以做的只是使用CSS过渡并在不同的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>

library(ggplot2)
theme_set(theme_classic())

ggplot(data=md, aes(x=year, y=value, fill=variable)) + 
  geom_bar(stat="identity") + 
  ggtitle("Score Distribution") +
  geom_text(aes(label=value), position=position_stack(vjust=0.5), colour="white") +
  labs(fill="")

一旦结束，为什么不保持转换的状态？

1 个答案: