div元素内的Vue动画不起作用

Question

我尝试了例子

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-show="show">hello</p>
  </transition>
</div>

有效！ 但是，当我用div替换Element p时，它不起作用！

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <div v-show="show">hello</div>
  </transition>
</div>

为什么div元素内的Vue动画不起作用

Answer 1

添加CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
 }
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}