无法使 Vue.js 转换正常工作

Question

我有一个通过 v-for 显示的项目列表。默认情况下，仅显示每个项目的摘要部分。当点击一个项目时，显示该项目的详细信息部分。

这是通过 adding/removing 和 active class 并在项目的详细信息部分切换 display: block / display: none 来完成的。

现在我想添加平滑过渡。我关注了the first example in the docs。但我不知道如何让它按预期工作。目前转换根本不起作用：点击项目时细节部分立即出现，再次点击时立即消失。

我的代码有什么问题？

    .event-details {
      display: none;
    }
    
    .event.active .event-details-enter-active,
    .event.active .event-details-leave-active {
      transition: opacity .5s;
      transition: height .5s;
    }
    
    .event.active .event-details-enter,
    .event.active .event-details-leave-to {
      opacity: 0;
      display: none;
      height: 0;
    }
    
    .event.active .event-details-enter,
    .event.active .event-details-leave-to {
      opacity: 1;
      display: block;
      height: auto;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<li :class="{ active: event.active }" v-for="event in events" @click="showEvent(event)">
      <div class="event-summary">
        content
      </div>
      <transition name="event-details">
        <div class="event-details">
          content
        </div>
      </transition>
    </li>

编辑：这是事件数组的 console.log：

Answer 1

您应该将 v-if 指令添加到 transition 包裹的元素中，如下所示

new Vue({
  el: '#app',
  data() {
    return {
      events: [{
          active: false,
          city: "new york"
        },
        {
          active: false,
          city: "Algiers"
        },
        {
          active: false,
          city: "Paris"
        },
        {
          active: false,
          city: "Madrid"
        },

      ]
    };

  },
  methods: {
    showEvent(index) {
      this.events[index].active = !this.events[index].active;
    }

  }

})

.event-details{
padding:20px;
color:#55ff44
}
.slide-fade-enter-active {
  transition: all .8s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ul>
    <li :class="{ active: event.active }" v-for="(event,index) in events" @click="showEvent(index)">
      <div class="event-summary">
        {{event.city}}
      </div>
      <transition name="slide-fade">
        <div class="event-details" v-if='event.active'>
          some content
        </div>
      </transition>
    </li>
  </ul>
</div>

无法使 Vue.js 转换正常工作

Can't make Vue.js transition work properly

javascript

transition

vue.js

vue-component

vuejs2