Having trouble getting the expected transition effects to work with Vue.js

Question

Having trouble getting the expected transition effects to work with Vue.js

Currently, I have a display of lists of items through the use of v-for. Initially, only the summary section of each item is visible. Upon clicking on an item, the details section is supposed to appear.

This functionality is achieved by adding or removing an active class and toggling between display: block and display: none for the details part of the item.

My goal now is to incorporate smooth transitions into this process. I followed the example provided in the Vue.js documentation, specifically the first example. However, despite my efforts, the transition does not seem to work as intended. Currently, when clicking on the item, the details section instantly appears and disappears without any transition effects taking place.

I am struggling to understand what could be wrong with my code. Here is the snippet:

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

Additionally, here is a console.log of the events array for reference:

https://i.stack.imgur.com/cQgKv.png

javascript vue.js vuejs2 vue-component transition

Answer 1

Answer №1

To make the transition work, you need to include the v-if directive on the element wrapped by the transition tag.

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>

Answer 2

To make the transition work, you need to include the v-if directive on the element wrapped by the transition tag.

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>

Having trouble getting the expected transition effects to work with Vue.js

Answer №1

Similar questions

Prevent redirection on buttons within ionic lists

Setting radio button selection programmatically in React Material-UI: A step-by-step guide

Having trouble with state not updating correctly after making a fetch request within a useEffect hook in

Is there a way to continually update a specific portion of a webpage using AJAX without manual intervention?

My goal is to design a dynamic textbox for a website that allows users to customize the text in any format they desire

Issue with Jquery Slider Showing Empty Slide

What steps can I take to expand this on a grander level?

How to modify the content type in an Angular.js $http.delete request

Is getElementById() returning null?

What methods can I use to insert an array of objects into a Query?

Implementing React component that clears state upon selecting a place with Google Autocomplete

The functionality of JQuery's .hover() is disabled once an HTML onClick() event is activated

Retrieving a boolean value from a function that includes an asynchronous AJAX request

What could be the reason for the undefined initial state in my vuex store?

Strategies for accessing the initial portion of an AJAX response

Disappearance of side bar image after page reload in Laravel

MongoDB does not recognize Db.Collection as a valid function

Unable to perform dynamic query with $in operator in Mongoose find method

Using Promise.all within an async function to handle variables inside of Lambda functions

Discovering the proper method of validating radio buttons is vital