Questions tagged [vue-transitions]
101 questions
6
votes
1 answer
Nested Vue transitions: one transition works, the other doesn't
I have a modal which is a white container on top of a semi-transparent dark backdrop. When this modal is triggered I want the backdrop to fade in, and after that I want the white container to slide up from bottom of the screen.
But while the fade-in…
drake035
- 3,955
- 41
- 119
- 229
6
votes
1 answer
vue fade transition only work when element is leaving and not entering
I am trying to learn Vue.js and doing a basic fade. I have an list of links that always stay on the page. On clicking the link, I wish to fade in and out the visibility of a div. By default the div isn't seen. This div contains several components. I…
Laiqa Mohid
- 461
- 3
- 14
5
votes
1 answer
Transition not working for slots in vue 3
I was trying to add transition to a slot like this
Added CSS classes like this
.committee-enter-from{
opacity: 0;
…
vithu shaji
- 339
- 3
- 14
5
votes
2 answers
Vue transition-group - how to prevent "jumping"?
I have two divs that i transition between using transition-group, which works as it should - however, the content below the divs transitioning, is "jumping" depending on the height of the divs.
What I want it that jumping being prevented, and…
viewist
- 77
- 1
- 7
4
votes
2 answers
Vue.js - no access to this.$parent when child component is inside
What I want: I have two components, the parent component (Wall.vue) and the child component (PostItem.vue). Every PostItem has a delete button. On click, a request to my API is sent and the item gets deleted from the database. Then I want to call…
Michel
- 127
- 3
- 11
4
votes
1 answer
vue transitions without having to use v-if / v-show
Brief question since I'm new to Vue transitions. My question is if it possible to apply a transition to an element/component without re-rendering it. Hence, not with the use of v-if or v-show. My use case is expanding and shrinking a div component…
kib
- 77
- 5
3
votes
2 answers
Vue3 router + transitions warnings
I have a wrapper component with a transition:
// Wrapper.vue
Jakub Kylián
- 259
- 3
- 12
3
votes
2 answers
Can't change transition on the fly for a transition group
In my app, clicking a modal's close button makes it disappear with a fade animation whereas swiping it down makes it disappear with a swipe animation. This is done by changing the modal's based on event.
The same thing doesn't seem…
drake035
- 3,955
- 41
- 119
- 229
3
votes
5 answers
Vue transition slide down for each item
I'm learning how transitions work with vue. I have a price estimation, when each tab is clicked it will bring up an estimated price per item. I want when the item appears, there is a slide down effect. I tried to find out how, and I got the way by…
frankfurt
- 143
- 1
- 5
- 23
3
votes
0 answers
How to animate CSS infinitely with Vue
Looking for a way to run Vue animations infinitely. The initial animation works, but it won't run infinitely.
.endless {
animation: endless_animation 10s linear infinite;
}
This works with plain css, but will restart every time the component…
Jacob
- 890
- 10
- 30
2
votes
1 answer
How do transitions work on Images in Vue JS 3?
I have been unable to apply a fade in transition to an image using Vue JS 3. The transition works fine with text, but the image just loads and renders as it would normally without a transition applied.
I have been trying to create an image loader,…
jban28
- 23
- 5
2
votes
2 answers
Nuxt 3 Transition is not working in a component
I am doing a sidebar in Nuxt 3 and I have separated the sidebar into two components, namely Sidebar and Hamburger.
I do not understand why does the Transition in a component in Nuxt 3 is not working?
I am also using useState() composable to share a…
Eugene10
- 71
- 2
- 6
2
votes
1 answer
Vue Transition - animation-delay behaves wierd/does not work
So I am trying to animate an SVG. When applying animation delay to each path it works properly in v-leave-active class but doesn't work at all in v-enter-active and behaves weird. Check the code below and please help. Run the snippet and click on…
Rejown Ahmed
- 84
- 8
2
votes
1 answer
Transition animations not working when migrating project from Vue2 to Vue3
I have a project that is on Vue2.7 and am porting that over to Vue3 and vite.
I pretty much copied over the exact code because of compositionAPI support in 2.7. Everything renders normally, but now all of the sudden my transition animations are not…
LovelyAndy
- 841
- 8
- 22
2
votes
0 answers
How can you make a treeview animate smoothly in vue?
My goal is described here in Vue SFC Playground:
If you toggle Child1.1 with the button then Child1.2 is transitioning smoothly to its next position whereas in the example below Child1.2 will jump immediately to its next position. How can you…
Euler314
- 21
- 1