Applying transition effects to elements external to the VueJS transition component

Vue Version 2.6.10

To view the reproduction, please click on the link provided.

<router-link to="/a"><a name="/a">[a]</a></router-link>
<router-link to="/b"><a name="/b">[b]</a></router-link>
<router-link to="/c"><a name="/c">[c]</a></router-link>
<transition :name="transitionName">
  <router-view></router-view>
</transition>

This code contains three different routes. When switching from A to B, the router links appear to move instead of remaining still as expected.

Despite not being placed within the transition tag, the router links are animated in the browser. This behavior is unexpected and may need further investigation.

I have attempted various methods to simplify the reproduction scenario such as using different transition effects or removing certain elements, but the issue persists only when switching between specific route pairs.

Answer №1

After some investigation, I have identified the issue. The use of overflow: hidden was preventing me from noticing the alterations in clientWidth. Additionally, without the scrollbar present, I failed to observe the changes in scrollX when the input element received focus. This inadvertently created the illusion that the links were being animated.

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

Incorporate Extra Personalized Characteristics into Template (Slightly)

I'm interested in including additional attributes when using data-sly-call Here is the template: <template data-sly-template.button="${ @ model}"> <button data-info="Body" class="${model.moreClass}&qu ...

Maintain scroll position during ajax request

I am working on a single-page website that contains numerous containers. Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time. These containers have variable heights set to auto. The website uti ...

Shorten Text - React Native

I currently have a React Native application with a FlatList component. The logic I initially implemented was to display an Expand/Collapse arrow whenever the content at the 100th position in the list is not empty. However, I now realize that this approach ...

Repeat Top Background

I am currently in the process of converting this design into HTML & CSS code. I am facing a challenge when it comes to repeating the background on the top section since the left and right parts do not use the same image file. Even after attempting to ...

Launching the Bootstrap 5 modal will cause the header and background to shift towards the right side

Currently, I am working with Angular 2 and Bootstrap 5 for the front-end of my project. I noticed that when I open a modal, the header and background shift to the right, covering the scrollbar. Upon closer inspection, I discovered that the HTML code trans ...

Unique Selector Customization

Is there a way to style all custom elements in CSS? I am looking to make custom elements default to block display (as most browsers render them inline by default) and then adjust as needed. A potential rule I have in mind is: *::custom { display: blo ...

Tips for increasing the width of a div wrapper to accommodate the table within it

I'm currently using the dataTable library with external plugins, and I want the wrapper width to adjust automatically. Even if the width of th elements exceeds the viewport width, I don't want the div width to exceed 100%. How can I make the di ...

The identifier is not being used for the HTML element on the mobile browser

Having some issues with CSS priority on my mobile device. The problem is that the CSS id selector push-content is not being applied to the body element. Surprisingly, it works perfectly fine on my PC browser. The code that's not working on mobile dev ...

Attempting to dynamically update the image source from an array when a click event occurs in a React component

Has anyone successfully implemented a function in react.js to change the image source based on the direction of an arrow click? For instance, I have an array set up where clicking the right arrow should move to the next image and clicking the left arrow s ...

Segment the progress bar into sections

Struggling with an Angular app, and still new to HTML and CSS, I am attempting to create a unique progress bar. I aim to split each section of the progress bar into two subsections with distinct background colors shown in this image: https://i.sstatic.net/ ...

Set a div to have both absolute positioning and sticky behavior

Looking to create a div ("profilemenu") that pops out on the right side of the page triggered by a button (I'll handle this part). I want it to have a sticky attribute, but positioning has been tricky. Using position: absolute works for proper placeme ...

Guide on submitting a pre-filled form with data pulled from an array of objects using vue

My current school project involves creating a web app for dog walkers. I am currently working on a form to update the information of dogs owned by a user. This data is stored in an array of objects, where each object represents a dog's information. I ...

AngularJS cube animation tutorial

I utilized this particular inquiry to develop a cube controller. Here's my progress so far. To initiate the animation, I am employing ng-if and ng-include. <div ng-repeat='view in views' class='cube container'> <div ...

Having issues with the accordion function in IE7

Hey everyone, I'm completely new to jQuery and could use some help. This accordion feature works perfectly on Firefox and Chrome, but I'm running into issues with IE7. You can see the problem in action at this link: here. Specifically, if you cl ...

iOS button on mobile Safari in the down state

Is there a way to customize the appearance of buttons in Mobile Safari so that they show my specified "down" (:active) state instead of the default semitransparent overlay when touched? ...

Connect CSS file in Wordpress

Currently, I am facing an issue with linking my stylesheet to another page in Wordpress. The Wordpress installation is located within a folder on the site as I only intend to use WP for a specific section of the website. Although this may not be the conven ...

Modify the state of a different module from within a Vuex module

I am currently working with two modules within my Vuex store. var store = new Vuex.Store({ modules: { loading: loading posts: posts } }); Within the loading module, I have a property called saving which can be toggled between true ...

Convert the entire webpage to JSON format instead of traditional HTML using Nuxt.js

My current Nuxt.js application is set up to serve HTML pages using layouts, pages, routes, and components. I'm wondering if it's possible to render a single route or page as a standard JSON response without any HTML tags - just pure JSON. Here ...

How can I combine a v-bind and v-if in a single div using Vue JS?

How can I combine these elements so they are both within the div tag? <div :class=" Date.now() >= new Date(deadline) ? 'search-result col-12 col-lg-10 container hideclosed' : 'search-result col-12 ...

Issue with Material UI React: Navbar does not properly align the box to the right side

https://i.sstatic.net/CHSwp.png I'm facing an issue with my navbar that is supposed to align all the page options to the right. Despite using a flexbox layout and trying different alignment properties like alignSelf: end, the text only moves slightly ...