Problem with transitions not working properly in Vue.js.The issue

Experiencing an issue with the Vue.js transition feature. Check out this link for reference. When the transition enters, it works smoothly, but when transitioning out, it's not functioning properly.

File: genetic.vue

<transition name="slide-fade">
            <div class="father_select" v-if="selecting == 'father'">
            <flickity
                :options="flickityOptions"
                ref="flickity"
                @init="api=$event.flickityApi"
            >
            <div class="carousel-cell" v-on:click="setFather('layer9.png')"><img src="layer9.png"/></div>
            <div class="carousel-cell" v-on:click="setFather('mama.png')"><img src="mama.png"/></div>   
            <div class="carousel-cell"><img src="../layer9.png" /></div>      
            </flickity>
        </div>
        </transition>

File: style.css

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

Answer №1

One option to experiment with is: ease-in-out:

.slide-fade-enter-active {
    transition: all .3s ease-in-out;
}

Alternatively, you could try adding the following code after .slide-fade-enter-active:

slide-fade {
    transition: all .3s ease-in-out;
}

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

Copy data from JSON file to Vue2 Google Maps markers

I recently started working on a basic Vue project. The project involves integrating a Google Map using the vue2-google-maps package. Additionally, I have a JSON file (or data.php) containing the following information: { "locations": [ { "nam ...

Creating Flexible Divs with Gradient Background for Older Versions of Internet Explorer - IE8 and IE7

I'm attempting to achieve the following. https://i.stack.imgur.com/YYOZv.jpg The issue I am encountering is that the elements in row1 have a different gradient background compared to those in row2. Additionally, row1 is populated dynamically with c ...

Carving out an SVG Mask within an image

I'm encountering an issue with a new website I'm working on. This is my first time utilizing SVG's. Essentially, I need to crop a circle that remains centered on the page from my image to reveal the image beneath the element. Although I atte ...

It is not possible to trigger an input click programmatically on iOS versions older than 12

Encountering a challenge in triggering the opening of a file dialogue on older iOS devices, particularly those running iOS 12. The approach involves utilizing the React-Dropzone package to establish a dropzone for files with an added functionality to tap ...

Connect to content on the current page

I am facing an issue where the linked heading of a section on the same page is getting lost under the fixed navigation bar when scrolling down. This problem seems to only occur on desktop view as it works fine on mobile preview. Here is the code I am curre ...

JS How can I generate individual buttons in a loop that trigger separate actions?

Currently, I am working with loops in jQuery to create a series of boxes that contain specific values. The problem arises when I try to assign actions to each box based on the values from an array. For example, I want each box to trigger a different alert ...

"Encountered a Laravel URL error: Undefined issue causing a 404 not found

Currently delving into the world of Laravel and Vue.js, I've come across a puzzling issue that has been hindering my progress. The code snippet you see below is actually a slightly modified version of my own code, which has been working flawlessly. De ...

Combining Laravel and Vue.js for optimum functionality

Allow me to present my dilemma. I am currently immersed in a Laravel project and initially incorporated Vue js as a script within a blade view using CDN. <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf ...

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...

Making an entire webpage background clickable using just HTML and CSS

Is there a way to make the entire background of the page clickable using just HTML and CSS? <div style="position: fixed; top:0px; left:0px; z-index: -1; background: url() center center no-repeat; width: 100%; height:100%;"> <a href='http ...

Choosing various files from separate directories within an HTML input type="file" element

Is there a way to select multiple files from various directories using the HTML input type="file" element? I have been searching for resources on how to do this without any luck. Are there any npm packages that can assist with achieving this functionalit ...

Looping through various object attributes and accessing an array of objects within it

Within my application, I am currently receiving an object structured as follows: { "data1":[ {},{}{} ], "data2":[ {},{},{}....], "data3":[ {},{},{}.....] } I am looking for guidance on how to utilize v-f ...

JavaScript and CSS failing to implement lazy loading with fade-in effect

Is there a way to add the fade-in animation to an image when it is loaded with JavaScript or CSS? Currently, the code I have only fades in the image once it is 25% visible in the viewport. How can I modify it to include the fade effect upon image load? ...

Ways to position a button at the bottom of a Bootstrap card

In the card layout, I am struggling to position the red button at the bottom of the column despite using margin auto. Can anyone provide a solution for this issue? Thank you in advance! <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

Tips for placing a div within a flex item

Struggling to get it right, here's my query: This is how my DOM looks: <div id="content"> <div class="listitem"> <img class="thumbnail"/> <div class="option_icon"></div> ...

Avoid floating right elements all the way up if there are already elements floating left

I am struggling to position block 5 next to block 3 on larger screens, while maintaining the desired arrangement on smaller viewports. The blocks do not have fixed heights in my setup. You can see my codepen for a better understanding of what I'm try ...

Shifting a static-width table within a predetermined width container

Unable to modify the HTML code for this project, I am in need of a CSS-only solution. Dealing with an unpleasant HTML structure that is causing some issues. A side by side comparison on fiddle shows where I'm currently at in the process. The challeng ...

Ways to reposition arrows upwards in Vuetify carousel

Looking for help on adjusting the position of arrows in a carousel made with vuetify. I need to move both arrows up by setting top:0 in both v-window__next and v-window__prev classes, but unsure how to apply this property to the component. https://i.sstat ...

Trigger a Vue update upon detecting a new ID in the URL

Within my Vue2 application, I have implemented the use of the id parameter within a component that occupies the primary view. For example, http://localhost:8080/#/basereports/watercombochart/129 This URL signifies that the chart with id settings correspon ...