I have a component that renders a list of buttons from the children of a route.
<template>
<div v-if="childrenRoute.length" class="buttons">
// render buttons
</div>
<transition v-else name="fade" :name="transitionName" mode="out-in">
<router-view></router-view>
</transition>
</template>
When URL changes, it's not rendering the component of the matched route, instead updating the same component.
/clients/:id
/clients/:id/second-level
/clients/:id/second-level/third-level
But when I reload the page, it renders correctly.
Any thoughts?
Related
I need to refresh a component on the page once a user fills up the account opening form. I know that :key="$route.fullPath" will not help me because my router path doesn't change.
This is the container that holds the router-view.
<template>
<section>
<the-navbar class="mb-4"></the-navbar>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</section>
</template>
When a user clicks a button to open account, the following component is loaded. This component holds 2 child components - AccountOpenForm and AccountOpenConfirm. When a new account is opened, AccountOpenForm becomes hidden through the v-if directive and AccountOpenConfirm is shown instead.
What I need now is when the user clicks open account again, I need to fully reload the router view and display AccountOpenForm again. What's the best way to do that?
<template>
<v-container>
<div class="mx-2 mt-8">
<v-row>
<transition name="fade" mode="out-in">
<account-open-form
#create-account="createAccount"
:overlay="overlay"
v-if="!newAccount"
>
</account-open-form>
<account-open-confirm
:new-account="newAccount"
v-else
></account-open-confirm>
</transition>
</v-row>
</div>
</v-container>
</template>
Here is code example:
https://jsfiddle.net/9jypnkue/
The transition v-on:enter="enter" for the nested view is not called when also the main router-view is transitioning.
<router-view ref="nestedView" v-slot="{ Component }">
<transition v-on:enter="enter">
<component :is="Component"/>
</transition>
</router-view>
I would like both animations being called simultaneously.
Using Vue 3 and Vue Router 4 release candidate/beta.
Adding 'appear' to the router fixes it:
<router-view ref="nestedView" v-slot="{ Component }" appear>
<transition v-on:enter="enter">
<component :is="Component"/>
</transition>
</router-view>
https://jsfiddle.net/27qae5zj/1/
When I setup a typical route transition everything works as expected
<transition name="view" mode="out-in">
<router-view />
</transition>
But if I try to put the transition inside a view instead, the transition doesn't work
<template>
<transition name="view" mode="out-in">
<main>
<...>
</main>
</transition>
</template>
Any ideas why this could be the case?
The issue, seems to me, is that the <main> element is not entering or leaving, so it doesn't animate. You're probably trying to animate something within the <main> element which does not get targeted by the <transition> pseudo-element.
my suggestion is to encapsulate the element that's being toggled (v-if) or having visibility toggled (v-show) with transition
<template>
<main>
<transition name="view" mode="out-in">
<...something with a v-if or a v-show>
</transition>
</main>
</template>
Also, if you have are using a list/array (v-for) you should use transition-group
docs: https://v2.vuejs.org/v2/guide/transitions.html
Could someone explain me, why the following code doesn't work?
<template>
<div class="modal">
<transition name="slide-in">
<div #click.stop class="modal__container">
<div #click="close" class="modal__button">
<span class="modal__button--close">Close</span>
</div>
</div>
</transition>
<transition name="fade-in">
<div #click="close" class="modal__overlay"/>
</transition>
</div>
</template>
I'm trying to create modal with two different animations (slide-in for text area and fade-in for modal overlay).
If i delete the element with class modal and edit code to the following everything works fine.
<template>
<transition name="slide-in">
<div #click.stop class="modal__container">
<div #click="close" class="modal__button">
<span class="modal__button--close">Close</span>
</div>
</div>
</transition>
</template>
Referencing Vue.js documentation on transitions
Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM
That means that DOM nodes that transition applies classes to, should be those which are inserted/updated/removed.
Since it is a modal window, I assume that it has v-if directive applied in parent component to handle it's visibility. In order for transition to work, it should wrap DOM element that will be updated.
You can understand it more easily if you move code of your modal window into the parent component. Just for better visualization of elements tree and transition's behavior.
In first example, conditional rendering (v-if) applies to <div class="modal">, which is not wrapped with transition - therefore no animation will be triggered. At the same time, nested nodes are wrapped with transition, but there is nothing that will update or remove them. They are statically displayed and inserted initially on component's creation. Nothing to animate.
In order for it to work as expected following structure would be advisable:
<template>
<transition name="fade-in">
<div
class="modal__overlay"
#click="close"
>
<transition name="slide-in">
<div
v-if="containerVisible"
class="modal__container"
#click.stop
>
<div #click="close" class="modal__button">
<span class="modal__button--close">Close</span>
</div>
</div>
</transition>
</div>
</transition>
</template>
This solution expects modal__overlay to have position: fixed; style and variable containerVisible to be set to true inside mounted hook of modal component.
I have 1 page with 2 components. Component A has a button, when clicking disalbe A and show component B.
If i use transition i am getting this error.
I want a nice fadeout A and fade in B, how can i achieve?
Error:
[Vue warn]: <transition> can only be used on a single element. Use <transition-group> for lists.
App.js
<transition name="fade">
<div class="fade-enter-active" v-show="datatable">
<component-a :title="'AAA'"></component-a>
<button v-on:click="showCompB">Show B and disable A</button>
</div>
<div class="fade-enter-active" v-show="componentb">
<component-b :title="'BBB'"></component-b>
</div>
</transition>
export default {
data() {
return {
datatable: true,
componentb: false,
etc etc
Good morning sir,
As the error stated, the <transition> component can be used only with a single child element. You can learn more about that here: https://v2.vuejs.org/v2/guide/transitions.html
You could instead use two <transition> components to handle the fade animation for each one of your elements like so:
<transition name="fade">
<div v-show="datatable">
<component-a :title="'AAA'"></component-a>
<button v-on:click="showCompB">Show B and disable A</button>
</div>
</transition>
<transition name="fade">
<div v-show="componentb">
<component-b :title="'BBB'"></component-b>
</div>
</transition>
The fade animation will be applied to each div whenever componentb and datatable is visible or not.
Hope that helps you.