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

【问题标题】：Can't make Vue.js transition work properly无法使 Vue.js 转换正常工作
【发布时间】：2019-01-27 16:35:42
【问题描述】：

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

这是通过添加/删除 active 类并在项目的详细信息部分切换 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：

【问题讨论】：

你读过vuejs.org/v2/guide/transitions.html#List-Transitions`吗？
我并没有尝试将转换应用于列表项，而只是应用于恰好位于列表项元素内的特定元素。
请分享您的数据对象或运行示例
如果你的意思是 events 数组，我只是将它添加到我的问题中。

标签： javascript vue.js vuejs2 vue-component transition

【解决方案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>

【讨论】：