What causes elements to transition in from the top-left corner when using TransitionGroup in Vue 3?

I'm currently working on adding animations to a small component that consists of a title, an image, and a set of buttons.

The animation rules are as follows:

  • Initially, only the title and the image are visible,
  • On hover, the title disappears upwards, the image moves up to take its place, and the buttons appear from the bottom,
  • When the hover ends, the title reappears from the top, the image goes back down replacing the buttons, and the buttons vanish downwards.

Currently, I'm facing an issue where the components (title and buttons) always seem to come from the top left corner of the page for some unknown reason. Additionally, the image is animated only when the hover ends, not when it starts.

Here's a link to the VueJS playground to demonstrate how it should work

Your assistance in resolving this issue would be greatly appreciated

I have already attempted :

  • Modifying properties in TransitionGroup (transition, animation)
  • Assigning the same key to each component, despite it being discouraged by the official documentation, which did enable the animation on the image at the beginning and end
  • Using position: absolute
  • Utilizing transition-origin
  • Applying perspective-origin
  • Forcing the top and left attributes via the @beforeLeave hook
  • Embedding the component in an iFrame, and observing that the components (title and buttons) still originate from the top left corner of the iFrame
vue.jsvuejs3css-transitionsvue-transitionsvuejs-transition-group

Answer №1

By replacing v-show with v-if, you will notice that the elements no longer appear suddenly from the top left corner. Additionally, for your specific case where you are only using transitions and not CSS animations, you may not need to specify type="animation".

To create a smoother transition effect, ensure you position the elements where you want them to move from and to. To make the transition seamless, apply absolute positioning to the leaving elements so that the space is freed up immediately:

.slide-fade-leave-active{
  position: absolute;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-100px);
}

You can try out this code in the Vue.js playground. Give it a try to see how it enhances your transitions.

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

``Are there any thoughts on how to troubleshoot display problems specifically on mobile

Whenever I use Safari on iOS for my web application, I encounter strange rendering issues. It's odd because the majority of the time everything functions as it should, but every now and then these bugs crop up with no discernible pattern. Examples th ...

cssvue.jssafarimobile-safari

A collapsible select list with checkboxes for children items

I am currently developing a website using Vue.js, HTML, and SCSS. I am looking to implement a drop-down functionality similar to the animated example provided in the gif below: https://i.stack.imgur.com/Mia2D.gif The gif demonstrates how the drop-down me ...

javascripthtmlcssvue.jshtml-select

Utilizing the power of Scoped CSS with Bootstrap/Bootstrap-Vue Integration

I'm currently working on a chrome extension and utilizing Bootstrap-Vue in my Vue files. I have imported bootstrap/bootstrap-vue into my js file, but the styling is being applied globally. Is there a way to scope the Bootstrap only onto specific inser ...

cssvue.jsgoogle-chrome-extensionbootstrap-4bootstrap-vue

Is there a way for me to adjust the font size across the entire page?

Most CSS classes come with a fixed font-size value already set. For instance: font-size: 16px font-size: 14px etc. Is there a way to increase the font size of the entire page by 110%? For example, font-size: 16px -> 17.6 font-size: 14px -> 15.4 ...

javascriptcssvue.jssass

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

How can I create a CSS animation that fades in text blocks when hovering over an image?

I have been trying to implement CSS3 transitions to create a hover effect where the text and background color fade in when hovering over an image. Despite my attempts with various selectors and transition types, I can't seem to achieve the desired res ...

htmlcsscss-transitionsfade

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

cssvue.jsstyles

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

javascripthtmlcssvue.js

The animation feature on the slideshow is dysfunctional

For this Vue component, I attempted to create a slideshow. The process is as follows: 1) Creating an array of all image sources to be included (array: pictures) 2) Initializing a variable(Count) to 0, starting from the beginning. 3) Adding v-bind:src=" ...

javascripthtmlcssanimationvue.js

Nested elements not transitioning using CSS

Why is my transition not being applied to the submenu <a> tag? The color change is working fine, but the transition does not occur on hover. When I use the same rules on another element with a different main class, it works perfectly. It seems like t ...

htmlcsscss-transitions

Arranging text in alignment on a single line with Vuetify

I am attempting to format text in a way that it is aligned with part on the left side of the card and the other part on the right (with space between them). However, when using class="text-right", the text gets moved down. Does anyone have any ideas on h ...

cssvue.jsvuetify.js

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

htmlcsscss-transitions

How to eliminate the unnecessary gap between rows in a Vue div displayed as a grid

I have recently started working with Vue and in my current project, I encountered a challenge where I needed to display 2 players in each row within a div. To achieve this, I utilized the display: grid; CSS property on the playerDiv id. However, I am facin ...

javascriptcsstwitter-bootstrapvue.jsvuejs2

What is the best way to create floating text that appears when clicked, similar to the mechanics

https://i.stack.imgur.com/nRKG1.jpg Upon clicking the "big cookie" in my game, a popup appears displaying the number of cookies earned (like +276.341 septillion in this image). The popup slowly moves upward and then fades out. I successfully incorporated ...

javascripthtmlcsscss-animationscss-transitions

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Currently, I am developing an application using Rails, Vue, and TailwindCss 1.0+ I am facing an issue while creating a dropdown menu for my products. When I click on the dropdown button, the items in the dropdown fly off to the edge of the screen instead ...

htmlcssvue.jstailwind-css

Flip the direction of this vertical CSS motion blur effect

Is there a way to modify this code so that the object can have a vertical motion blur instead of a horizontal one? I want it to move from top to bottom and then back up. Can anyone assist me with this? http://jsfiddle.net/db8gr4y6/ #outer { posit ...

htmlcsscss-transitionscss-animations

When the margin-left changes, SVG begins to flicker and shake in a marquee effect

I've been experimenting with a marquee effect using vanilla JS. The effect is working, but I'm encountering some shaking issues with SVG and images as they move. <div class="marquee"> <h1>Nepal <svg version="1.1&qu ...

javascripthtmlcsscss-transitions

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked. The images transition from one to another, but I wanted to add a rolling ...

javascripthtmlcsscss-transitions

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

csstwitter-bootstrapvue.jsconditional-rendering

Tips for circumventing the use of responsive tables in Buefy

I am facing a challenge with displaying data in a Buefy table in a way that it appears as a conventional table with columns arranged horizontally on all devices, rather than the stacked cards layout on mobile. In order to accommodate the content appropriat ...

cssvue.jsbulmabuefy