What is causing the collapsed-animation to malfunction in Vue3?

Why won't the transition animation function in vue3js? The animation does not appear to be working for me. I've implemented this library https://github.com/ivanvermeyen/vue-collapse-transition

<template>
  <nav class="navbar color-dark section-padding">
    <span :class="this.$route.meta.connect ? 'navbar-toggler' : ''">
      <button class="border-0 navbar" @click="open()">
        <img :src="navgridImg" style="height: 26px; margin: 1vw" />
      </button>
    </span>

    <CollapseTransition >
      <div v-show="show" :class="showClass" id="navbarSupportedContent">
        jdlkajdlsajdlsjdlskajdlsakjdlsajjdlkajd
        lsajdlsjdlskajdlsakjdlsajjdlkajdlsajdlsjdlska
        jdlsakjdlsajjdlkajdlsajdlsjdlskajdlsakj
        dlsajjdlkajdlsajdlsjdlskajdlsakjdlsaj
      </div>
    </CollapseTransition>
  </nav>
</template>
<script>
  import { ref } from 'vue'
  
  import { CollapseTransition } from "vue-collapse-transition"

  export default {
    components: { CollapseTransition,  },
    setup() {
      const show = ref(false)
      const showClass = ref('collapse navbar-collapse')

      const open = () => {
        show.value = !show.value
      }

      return {
        show,

I have followed the documentation closely and my implementation is quite similar, but the animation is still not functioning as expected. I cannot figure out what might be causing this issue.

Answer №1

@ivanv/vue-collapse-transition is designed for Vue 2 and is not compatible with Vue 3. You can check the version on the NPM page by visiting: https://www.npmjs.com/package/@ivanv/vue-collapse-transition

For Vue 3 transitions, I suggest exploring the built-in options available here: https://vuejs.org/guide/built-ins/transition.html

You don't necessarily need a separate dependency just for a collapse animation ;) Below is an example of a collapse animation using Vue 3 transition features.

<template>
  <button @click="openClose">open/close</button>
  <Transition name="collapse">
    <div class="collapsableDiv" v-if="isShow">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis
      blandit congue. Etiam id porttitor eros. Interdum et malesuada fames ac
      ante ipsum primis in faucibus. Aenean ut convallis dui, vitae vehicula
      lacus. Phasellus id blandit urna. Phasellus molestie ex ut sagittis
      scelerisque. Quisque eleifend dui eu quam tempor, a finibus augue
      scelerisque.
    </div>
  </Transition>
</template>

<script setup>
import { ref } from "vue";
const isShow = ref(false);
const openClose = () => {
  isShow.value = !isShow.value;
};
</script>
<style>
.collapsableDiv {
  background-color: rgb(189, 189, 189);
  overflow: hidden;
  width: 250px;
}
.collapse-enter-active {
  animation: collapse reverse 500ms ease;
}
.collapse-leave-active {
  animation: collapse 500ms ease;
}
@keyframes collapse {
  from {
    max-height: 200px;
  }
  to {
    max-height: 0px;
  }
}
</style>

Update: The animation has been improved by eliminating the dependence on max-height; instead, it now utilizes scaleY(). Additionally, the delay issue during animation reverse caused by significantly higher max-height than the actual element height has been resolved.

<style>
.collapsableDiv {
  background-color: rgb(189, 189, 189);
  width: 250px;
  transform-origin: top;
}
.collapse-enter-active {
  animation: collapse reverse 500ms ease;
}
.collapse-leave-active {
  animation: collapse 500ms ease;
}
@keyframes collapse {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}
</style>

Cheers :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing the Alignment of a Bootstrap Navbar with CSS

Having trouble centering the listed items (excluding the image and title) in the middle of the navbar. Tried various solutions with no luck! Any suggestions on how to tackle this issue? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

I am having trouble styling a pre-existing class in bootstrap using my custom CSS file

html <section id="title"> <div class="container-fluid"> <!-- Nav Bar --> <nav class="navbar navbar-expand-lg navbar-dark"> <a class=" navbar-brand">tindog</a> ...

Tips for integrating external JavaScript libraries and stylesheets into a widget

I am currently working on developing a custom Javascript widget that requires users to insert specific lines of code into their web pages. This code will then dynamically add an externally hosted javascript file, allowing me to inject HTML content onto the ...

How to stop the overflow scrollbar in a grandchild element with CSS grid

Encountered an unusual issue while using a combination of CSS grid and overflow auto. In the scenario where there are 3 elements, the outermost element has display: grid, the middle element has height: 100%, and the innermost element has both height: 100% ...

Having trouble with Image and Css not displaying correctly when using CodeIgniter 3 with DomPDF?

I'm currently utilizing CodeIgniter 3 and dompdf to convert an HTML view into a PDF. While I am able to successfully convert the HTML to PDF, the proper styling is not being applied. All necessary CSS files have been included as custom design in the v ...

Performance issues with jquery addClass and removeClass functions observed in Internet Explorer 11

I am currently working on an application that monitors nodes within a cluster, and I have created a visual state example to demonstrate this. Each small box in the grid represents a node, and when hovering over a node, the rest of the nodes in that particu ...

Smooth transition of an arrow moving in a continuous loop using CSS animations

I am attempting to create a seamless loop of a single arrow within a div. My approach involves using two SVG arrows in such a way that when the top part of the first arrow is hidden, the corresponding section of the second arrow should be displayed. This ...

Activate divs with Bootstrap5 modal toggle functionality

What adjustments must be made to the Bootstrap 5 example below in order to achieve the following two objectives: The "afterAcceptingTerms" division should remain hidden until the user clicks on the Accept Terms modal button, ensuring that only the "before ...

Animation effect in Jquery failing to execute properly within a Modal

I have developed a small jQuery script for displaying modals that is both simple and efficient. However, it seems to only work with the fadeIn and fadeOut animations, as the slideUp and slideDown animations are not functioning properly. I am unsure of the ...

How can I prevent a nested Table from inheriting the style of the parent table?

Just to clarify, I'm not using tables or any other styling methods like that on my page. I have a simple table that lists services, prices, and PayPal buttons for adding to the cart. While everything is functioning properly and looks good, there are ...

What is the best way to ensure a null-check is performed before accessing the value in ref() in Vue3?

I am encountering some issues where the availability of modelInfo to access is not consistent. Please take note: modelInfo?.value.model_owner const summaryItems = ref({ title: "Model Summary", items: { "Model Owner": getFull ...

The background image is not displaying correctly

I've been struggling to add a background to the menu section at the top of my webpage. I uploaded the image to www.ra3manifesto.co.nf and want the logo, h1, and menu bar to be placed on top of it. I attempted to set this background using the following ...

Is it possible to reposition the vertical scrollbar to a location that is not on the left or right side?

Whenever I resize my modal on small screens, a horizontal scrollbar appears, causing the vertical scrollbar to disappear as it gets stuck on the right side. I am looking for a solution to keep the vertical scrollbar on the right side of the modal while scr ...

When a user clicks anywhere on the website, the active and focused class will be automatically removed

I'm currently working with Bootstrap tabs on my website. I have three tabs, and when a user clicks on one, the active and focus classes are added to indicate which tab is selected. However, I've encountered an issue where clicking anywhere else ...

Troubleshooting a Problem with CSS Div Multi-column Formatting

I have designed a multi-column div that displays correctly in Firefox but has formatting issues in Chrome and IE. In Firefox, the three columns appear properly with the frame of the last item in column one ending correctly. However, in Chrome and IE, the f ...

Understanding the fundamentals of positioning elements in CSS as they float on a webpage

Understanding the behavior of float in CSS can be confusing. When floating an element to the left or to the right, it affects how other elements wrap around it. But why do some elements wrap while others don't? For example, when you have a floated im ...

Persistent vertical menu dropdown that remains expanded on sub menu pages

I am struggling to understand how to keep my menu sub items open when on the active page. Although I have tried similar solutions, I have not been successful in implementing them. I apologize if this question has been asked before. My approach involves usi ...

Adjust the color of the text as it scrolls by

As I work on developing my website using the Neve Theme on WordPress, I have encountered an issue with customizing the header block. I am using a plugin to set a background color for the header after scrolling 100px down the page, but this makes the text h ...

Alignment of Submenus in a CSS Vertical Menu

I'm currently facing an issue with my vertical menu and submenu alignment. Despite everything working correctly, the submenu does not align horizontally as expected, instead shifting up against the header div above it. Any assistance to resolve this w ...

As I resize my browser window, I notice that my menu button starts to shift upwards along the

I recently created a menu button that looks great, but I noticed that when I shrink the browser window, it starts to move slightly upwards. It's really annoying and I can't figure out why this is happening. Can someone please help me troubleshoot ...