The transition in Vue Js is only effective when elements are entering, not when they are

Attempting to implement a vue js transition from bottom to top and top to bottom. The transition works smoothly from bottom to top when entering, but there is no transition effect when leaving.

Below is the CSS code for the transition:

.slide-details-mobile-enter-active {
    @include transition(all 0.5s ease-in);
}

.slide-details-mobile-enter-active {
    @include transition(all 0.5s cubic-bezier(0, 1, 0.5, 1));
}

.slide-details-mobile-enter-to, .slide-details-mobile-leave {
    transform: translateY(0vh);
}

.slide-details-mobile-enter, .slide-details-mobile-leave-to {
    transform: translateY(100vh);
}

The Vue template structure is as follows:

<transition :name="detailsTransition">
        <sc-fcst-details
            v-if="viewDetails"
            @changeactiveday="changeActiveFcstDay($event)">
        </sc-fcst-details>
    </transition>

The initial element in the Vue template has the following style properties defined in its CSS:

#fcst-details {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
  z-index: 4;
}

Any insights on why the leave transition is not functioning correctly?

In addition, I attempted to use the `top` property instead of `transform`, but it did not yield the desired outcome.

Answer №1

I have found a solution that works perfectly for me:

.details-animation-enter-active, .details-animation-leave-active {
  transform: translateY(0vh);
  transition: all 0.4s ease-in-out;
}

.details-animation-enter, .details-animation-leave-to {
  transform: translateY(100vh);
}

Why not give it a try? 🙂

Update (changed to using top instead of transform):

.details-animation-enter-active, .details-animation-leave-active {
  top: 0vh;
  transition: all 0.4s ease-in-out;
}

.details-animation-enter, .details-animation-leave-to {
  top: 100vh;
}

Lastly, remember to delete top: 0 from the #fcst-details.

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

Unnesting Django Endless Pagination in a Twitter-style format, how can I move a div outside of another div?

After implementing Django Endless Pagination with the Twitter Style and Show More option, everything seems to be working smoothly without any issues. I've even included media queries in the HTML render to help visualize the problem more clearly when r ...

Tips for adjusting the placeholder color in Material UI using React JS

Is there a way to customize the background color and flashing color of the Skeleton component in Material UI? I would like to implement custom styling for it, similar to what is shown below: <Skeleton variant="circle" classes={{root:'pla ...

Challenge with Express Helmet: CSS fails to load properly on iOS Safari browser

After successfully adding Helmet to my Node/Express/EJS project and configuring my CSP to allow inline scripts, styles, and certain external sources on my Windows laptop in Opera, Chrome & Edge, I encountered a problem when connecting via iOS Safari on mob ...

"Can someone guide me on the steps to host my Laravel Project on Google Firebase? I

Currently, I am working on a project that involves using Vue.js for the front end, Laravel for the back end, and MySQL for the database. I successfully deployed the Vue.js portion to Google Firebase, but now I'm facing issues with the functionality re ...

What is the best way to eliminate excess padding or margin within an absolute block?

I am working on a project where I want to replicate an illustration similar to this one However, I am encountering an issue with the padding or margin. Here is what I have attempted so far: http://jsfiddle.net/kl94/RZPRS/2/ .circles { background-colo ...

Surrounding a parent div with an additional div element

I'm struggling to summarize my predicament, but let me share some simplified code that highlights the issue (index.html): <html> <body> <div id="wrapper" class="divide"> <div id="top" class="divide"> ...

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayis ...

Text box size in user input not adapting on mobile devices

Website: Visit the Cutter Travel Calculator here I've encountered an issue with my user input text boxes on mobile. Despite setting their width using the formidable forms plugin, the size adjustment doesn't seem to apply when viewed on mobile de ...

The interaction issue in Ionic 4 with Vue js arises when the ion-content within the ion-menu does not respond to clicks

My Vue app has been set up with Ionic 4 using @ionic/vue. Below is the code snippet from the main.js file: import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store&apos ...

CSS - Maximizing One Column's Width While Allocating Percentage Space for Two Columns?

It's been quite some time since I delved into the world of web development and I seem to have forgotten how to tackle this particular issue. Despite hours spent searching online, I've gained knowledge about flex-boxes and other useful tools, but ...

Media queries in CSS not functioning as intended

Trying to scale media requests with an image (logo) for various mobile devices like iPhone 5, 6, 6+, iPads, and large screens. Need to specify styles for portrait and landscape orientation as well. The code seems to be functioning only for iPhone 6, iPads ...

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution. Could you please take a look at my code first? // Code simplified for clarity, no need to worry about variables const Header = () => { return ...

The Vuetify font displays differently on production compared to development environment

After deploying my app, I noticed that it is using a different font compared to the development version. Despite trying multiple methods to set the font in the deployed app, it keeps defaulting to Roboto. I have experimented with various solutions, yet non ...

Utilize CSS to style active buttons with JavaScript

In an HTML document, the dynamic generation of divs and buttons using JavaScript can be seen in the code snippet below. <div style="background: rgb(247, 247, 247);"> <button class ="xyz" disabled="disabled">Button1</button> </div> ...

What could be causing the CSS to not display properly on specific routes?

I'm facing an issue where CSS seems to be working fine for certain routes with node.js & express, but not for others. It's puzzling because the HTML file links to the same CSS file in both cases. For instance, CSS works perfectly for the route " ...

Ensuring text is perfectly centered within a label and creating a label that is entirely clickable

Struggling to style a file input button and encountering some issues with labels. Here is the button in question. Firstly, how can I center the text in the label? Secondly, how can I make the entire button clickable instead of just the upper half? Also, ...

Steps to include a horizontal divider in the footer section of an angular-material table

Is it possible to add a line between the last row (Swimsuit) and the footer line (Total)? If so, how can I achieve this using Angular 15? https://i.stack.imgur.com/581Nf.png ...

Exploring the reasons for utilizing class and ID selectors within a <div> element to enclose a map in OpenLayers

The 'quickstart' guide provides a comprehensive overview of using id and class css selectors within the html code. In order to link the map object to a specific div element, a target is required as an argument for the map object. This target val ...

Printing specific div content from an HTML page using a print button

I have a situation where I need to control the printing functionality of my HTML page. Currently, I have two div tags in my code with a single print button at the top of the page. When I click on this button, it prints the content from both divs. However ...

Unusual occurrence: unexpected positioning issue with iOS and Chrome (Windows)

My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...