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

Mastering the usage of AngularJS Directive controllerAs syntax with scope is key to developing

Synchronous: Establishing a connection to MongoDB once the server has successfully launched

Navigating a collection of objects after a button is clicked

Has the zip creation tool in the Google Doodle on April 24th been coded entirely in JavaScript?

What is the best way to personalize the Window.Confirm() dialog in JavaScript?

What is the best way to pass the value from one textfield to another using material UI in a react application?

Sending a JavaScript click event using curl and PHP

The player remains unchanged

Change the background color of a table cell based on its value with the help of JavaScript

Creating visuals from written content

Injecting Language in Webstorm: Converting scss to HTML

Tapping into the space outside the MUI Modal Component in a React application

What could be causing the presence of additional characters in the responseText received from the Servlet to JavaScript via Ajax?

Is it necessary to have both index.js and Component.js files for a single component in React?

How to clear an autocomplete input in Vuetify using programming techniques

What is the best way to prevent double clicks when using an external onClick function and an internal Link simultaneously

Encountering an npm error: How can I install compiler-sfc that satisfies the peer dependency requirement for @babel/core?

Mongoose/JS - Bypassing all then blocks and breaking out of the code

having trouble displaying array data in a table using vuejs

Encountering Axios CanceledError while attempting to forward a POST request using Axios