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