Can't make Vue.js transition work properly

Question

I have a list of items displayed via v-for . By default only the summary part of each item shows up. When clicking on an item, the details part of the item is displayed.

This is accomplished by adding/removing an active class, and toggling display: block / display: none on the item's details part.

Now I want to add smooth transitions. I followed the first example in the docs . But I can't figure out how to make it work as expected. Currently the transition doesn't work at all: the details part appears instantly when clicking on the item, and disappears instantly when clicking again.

What's wrong with my code?

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

EDIT: here's a console.log of the events array:

Answer 1

You should add v-if directive to the element wrapped by the transition as follows

 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>