Questions tagged [vue-transitions]
101 questions
2
votes
1 answer
Vue/Nuxt page transition leave not working
so I tried to do page transitions on css but the leave transition didn't work, so I tried to do it with JS Hooks, but leave animations still doesn't work. I tried commenting on every step and I discovered that leave is not even getting…
Nyll
- 49
- 5
2
votes
2 answers
Router link with transition wont work second time:
routes.js
const routes = [
{
path: "/",
component: Home,
meta: {
title: 'Home'
}
},
{
path : "/register",
component: Register,
meta: {
title: 'Register'
…
OurBG
- 507
- 1
- 8
- 22
2
votes
0 answers
Transitions not working on nuxt-child component when route changes
I want to create a very simple nuxt transition between child routes.
The structure is:
index.vue
index
--one.vue
--two.vue
--three.vue
index.vue:
one
NavidMnzh
- 169
- 3
- 17
2
votes
2 answers
Vue transition works for "enter" state but not for "leave" state
I have a modal rendered on top of a semi-transparent backdrop. Both elements have a v-if controlled by the same variable.
Although the enter transition animation works fine, the `leave`` transition animation is ignored (it should fade out smoothly,…
drake035
- 3,955
- 41
- 119
- 229
2
votes
3 answers
Why is transition inside an element with v-if not entering the transition but leaving works?
The title explains pretty much everything. I've searched StackOverflow for a solution but neither of them helped.
An example using classic modal component:
Vue.component('modal', {
template: `
Drdilyor
- 1,250
- 1
- 12
- 30
2
votes
1 answer
Transition multiple elements at the same time on Vue component render
Simple case shown in the following jsfiddle:
https://jsfiddle.net/hsak2rdu/
I want to swap and animate two elements, but fail. As you can see after clicking the toggle button in the playground, the second element flashes into the final position.
I…
Chimoki
- 156
- 1
- 2
- 11
2
votes
1 answer
Vue fade in a list of images one at a time on load
I have a project in Vue where I need to show images. These images are contained inside a. When the page is loaded I want the images to fade in one at a time. I have added a transition group with a fade in effect and added a function where each image…
Stephen
- 913
- 3
- 24
- 50
2
votes
1 answer
Vue transition on router - but transition effects specific html Element
I have a page transition for VUE js that I have implemented. I did this manually because I could not find how to do this using VUES transition.
(I am using gridsome framework for vue js - I have added a custom App.vue page - which should allow…
Wally
- 705
- 1
- 9
- 24
2
votes
1 answer
Vuejs transition css only slide down
I've been searching for a long time for a solution to this problem, but I can't seem to find the best solution for this problem. Basically I have an accordion which when a user open's it, it should slide down gently with a nice transition.
I'm…
Ezrab_
- 825
- 5
- 19
- 44
2
votes
1 answer
Vue: updating transition name right before triggering transition doesn't render new transition
I'm seeing some behavior with Vue transitions that I don't understand. It'll be easier to explain by showing an example:
Given the following component:
Hey
hansn
- 1,936
- 3
- 19
- 32
2
votes
1 answer
Vue transitions and instant fade out of the component
Currently when using transition in Vue I'm facing the problem that some of the components on the page disappear instantly whereas the rest fade out normally with the whole page.
This is my transition set up as minimal reproducible example, is…
Alex T
- 3,529
- 12
- 56
- 105
2
votes
1 answer
Vue.js dynamic components don't change
I'm building a Vue.js based SPA where I want to transition between several parts of the content:
wortwart
- 3,139
- 27
- 31
2
votes
1 answer
Vue transitioned element not showing after transition is complete
I'm trying to animate an element to full browser height when the user clicks on the top bar. The animation works, but once the (enter) animation is finished the container jumps back to zero height, while it's supposed to stay until the user clicks…
Brammie
- 23
- 4
2
votes
0 answers
Vuejs transition classes are not applying on Vue Component
I'm using VueJs transition to make a component appVacancies slide.
It's Vue specific CSS for transition is
// Slide Down…
Yashwardhan Pauranik
- 5,370
- 5
- 42
- 65
1
vote
1 answer
Vue.js component not transitioning out even with mode="out-in"
I'm relatively new to vue.js and have been trying to get my routed pages to fade in and out when the user switches to a new page. I thought it would be fairly simple with vue, but I have been tearing my hair out over this. All the resources I found…
villagercomrade
- 25
- 1
- 2