What is the best way to create a unique transition for every component?

I have three elements that I would like to display with a transition effect when they appear or disappear.

There is one main element and the other two show up when you click the corresponding button. You can view my current code sample here: https://jsfiddle.net/5aq1k05L/

<transition :name="'step_' + currentView" mode="out-in">
  <component :is="currentView"></component>
</transition>

CSS:

.step_componentA-enter-active {
  transition: transform 0.4s;
}

.step_componentA-leave-active {
  transition: transform 0s;
}

.step_componentA-enter {
  transform: translateX(-100%);
}

.step_mainComponent-leave-active {
  transition: transform 0.3s;
}

.step_mainComponent-leave-to {
  transform: translateX(-100%);
}

.step_componentB-enter-active {
  transition: transform 0.4s;
}

.step_componentB-leave-active {
  transition: transform 0s;
}

.step_componentB-enter {
  transform: translateX(100%);
}

My goal:

When I click on the "componentA" button, I want that element to slide in from the left while "mainComponent" remains visible in the background (not disappearing as it does currently) during the transition.

The same effect is desired for "componentB", except it will slide in from the right and return to the right upon clicking back.

What am I overlooking? https://jsfiddle.net/5aq1k05L/

Answer №1

Revision 2:

Below is a functional demonstration featuring componentA and componentB sliding over the mainComponent: https://jsfiddle.net/5aq1k05L/8/

I made adjustments to the transition using mode:in-out, implemented individual z-index for each component, and positioned the elements in position:absolute within a container set to position:relative.


Update:

Check out this working example tailored to your scenario -> https://jsfiddle.net/5aq1k05L/4/


Upon dissecting the script step by step, you'll notice that the classes applied when componentB exits are

step_mainComponent-leave-active step_mainComponent-leave-to
, triggering a traditional toggle effect with respect to the styling of mainComponent.

If you wish to utilize different animations, consider utilizing enter-active-class and leave-active-class (refer to more info here) or incorporating two variables in the name attribute, possibly with dynamic values based on the preceding view stored in something like currentView.

You could structure it like so :

<transition
    :name="'step_' + currentView + '_from_' + prevView" 
    mode="out-in"
  >

In the store (make sure to update the states, mapState, etc. accordingly) :

SET_CURRENT_VIEW(state, new_currentView) {
  state.prevView = state.currentView;
  state.currentView = new_currentView;
}

Hopefully, this information proves valuable to you!

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

Securing some room beneath the table

I need some extra room below my table. <table border="0" class="medtable"> <tr> <th>User</th> <th>From</th> <th>To</th> </tr> <tr> ... </tr> ...

Trouble with margins on tr elements and borders in CSS and HTML

Here are my current findings: http://jsfiddle.net/62hKs/2/ What I desire to achieve: 1) Create a 15px margin between the two red boxes displayed 2) Modify the appearance of the 4 boxes so they resemble only 2, by eliminating the middle red line caused ...

Exploring the integration of datatables.net-vue3 with Vue.js 3 in Visual Studio: A step-by-step guide

I am trying to integrate datatables.net-vue3 with Vue.js 3 in Visual Studio. I have installed it using npm like so. However, I am facing issues with the imports in Visual Studio. I have tried importing them this way but it doesn't seem to work for me ...

Prevent the occurrence of a fixed height problem associated with the Bootstrap Navbar (Mega Menu)

In my project, I have a Custom Mega Menu that dynamically creates code to display all Nav bar entries. Since changing the logic of Mega menu creation is difficult, I am looking for a CSS solution to avoid fixed height in bootstrap columns. My code structu ...

Unable to reach this.$store (vuex) within any child component following a standard setup

As a newcomer to vuex, I recently installed it in my vue app but have been struggling to access the this.$store in any of my child components. Despite reading over 10 similar questions and attempting numerous changes and variations, I still can't see ...

Creating triangular side tabs with borders using CSS and HTML styling

I'm looking for a way to create triangle side navigation tabs similar to this example. I attempted using :after pseudo-element in my CSS: .tabs input + label:after{ content:""; float:left; position:absolute; top:0; right:-12px; width:0; height:0; bor ...

"Enhance your Vuetify v-select by learning how to effortlessly add the same item multiple times

Vuetify offers a select field component that allows users to choose options from a list for collecting information. You can find documentation here. This component functions with checkboxes, so each time you check an item, it gets added to the end of the ...

Navigating with VueRouter in your Chrome Extension is a breeze

I have been working on a Chrome extension using Vue 3 + VueRouter. One issue I encountered was trying to change the router-view content to display a different component, essentially showing users a different UI. Despite my efforts and various methods use ...

What steps should I take to create this animation?

So here's my concept: I envision a circle div positioned in the center with multiple small lines extending outwards, resembling rays of sunlight. How should I go about achieving this effect? Would implementing JavaScript or utilizing CSS3 animations b ...

Banner Text Alignment Issue: Uneven Left Alignment

Struggling to achieve consistent text alignment on a ribbon banner? Check out the issue I'm facing and see if you have any suggestions on fixing it: Link to Codepen Main issues: The first line of text appears slightly more indented on the left side ...

I am experiencing an issue with mydaterangepicker and primeng where it is not displaying properly in the table header. Can anyone assist me with this

I am attempting to integrate mydaterangepicker () with primeng turbotable (since primeng calendar does not meet the requirements), but I am having trouble with its display. Could you please assist me with some CSS code or suggest an alternative solution? ...

Switching from portrait to landscape view on a mobile website

Currently, I am working on a mobile website where the navigation bar looks great in portrait mode with 15px of padding around the top and bottom. However, when I switch to landscape mode, it occupies almost half of the screen. Does anyone have suggestions ...

I must update the menu to show only one sub-menu at a time, ensuring that multiple menus cannot be displayed simultaneously

When I click on a menu option, it displays correctly, but when I click on another option, both are displayed. The goal is to only display one at a time. https://i.sstatic.net/J6vLf.png $('.sub-menu ul').hide(); $(".sub-menu a").click( ...

Increasing the size of a background image as you scroll

Is there a way to adjust the background image of a div so that it scales according to the amount the page is scrolled? The current implementation works fine on desktop screens, but on mobile screens, the height of the background image reduces and the image ...

How to Vertically Align a div in the Center using Bootstrap 5

Is there a way to horizontally center a div using bootstrap 5? I want the div to be positioned in the middle, between the content above it and the end of the screen. I attempted the following: <div>some content</div> <div class="d-flex ...

show textboxes positioned in the middle of a slanted rectangle

Is there a way to place centered textboxes inside each of the colorful boxes in the image below? Update: I've posted my feeble attempt below. Admittedly, design is not my forte and I'm struggling with this task. p.s. To those who downvoted, tha ...

Trouble updating Vue 2 project using vue-cli due to npm update failure

I set up a Vue 2 project using vue-cli and attempted to execute npm update. Unfortunately, I encountered the following error: { npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-c ...

Is it possible to conceal an arrow in a typical dropdown menu?

Is it possible to conceal the arrow in a standard dropdown select fieldset? Check out this Fiddle for more information I am working on an autocomplete feature where users input an organization number and relevant information is fetched from a database. I ...

Embarking on the journey of nesting components within styled-components

Check out these custom components I created: <UserImg imgUrl={userPhoto}> <DropDown> <div onClick={handleAuth}>Sign Out</div> </DropDown> </UserImg> const DropDown = styled.div` letter-spacing: 0.2em; positi ...

Accordion is having trouble expanding fully

My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click. Switching the display from flex to column fixes the issue, but I don' ...