Questions tagged [vuejs-transition-group]
14 questions
4
votes
2 answers
Can you change an item's ID in vue.js?
I have a list of items, contained within a javascript array. Similar to the examples found on the vue.js documentation.
This is the workflow I'm struggling with:
A user clicks "Add".
I immediately add an item to the list (in the spot where they…
Shadow
- 8,749
- 4
- 47
- 57
3
votes
1 answer
Vue.js only applying animation on last element
I'm practicing Vue transition-group and imitating Vue document example specifically on THIS particular section.
The problem is that my example will apply animation only on end-element instead of element that's being Added/Removed.
Can someone please…
passionateLearner
- 722
- 1
- 7
- 19
3
votes
1 answer
Vue.js: transition-group animation doesn't work
I have a slider written as a transition-group component:
Olga B
- 513
- 2
- 11
- 34
2
votes
0 answers
Vue transition-group not animating properly when first list item is spliced from list
I am struggling to figure out why my transition group is not animating properly on the removal of the first element from a list. I tried producing a minimal, reproducible example to share on my local machine first and was successful. I then copied…
scienceyeaux
- 65
- 1
- 6
1
vote
0 answers
Vue Transition Group Animation - start v-move only after v-leave finishes
I would like to have the following flow:
5 items on a stack of notifications.
1 item is poped, so it enters on v-leave state, while the other 4 items don't animate at all. After item enters on v-leave state, the other 4 items animate to their new…
Igor Lira
- 21
- 2
1
vote
2 answers
How to implement inside a v-for loop?
There's one suggested answer on this, but the solution isn't working for me. I have a nested v-for and would like to animate the innermost li elements as they are removed or added by my computed statement. My current code looks like so:
…
kdsprogrammer
- 136
- 1
- 13
1
vote
3 answers
Animate adding/deleting items from todo list using transition
I have a todo list that is based on the example provided in the official vuejs documentation.
Example: https://jsfiddle.net/87Lfbzng/
-
steve- 471
- 6
- 15
0
votes
1 answer
Vue Transition Group issue: last item of v-for object overflows out of container when transitioning
As you can see from the code below, I am trying to apply a group transition on the object feedbacksToShow.
All works well unless I try transitioning the last item of the list, which overflows out of the #feedback-list div container.
I can't make use…
MW7
- 1
- 1
0
votes
1 answer
Why do VueJS move animations only work in one direction?
I'm entirely stumped by this. For some reason, Vue3 will correctly apply the move animation class for a
monitorjbl
- 4,280
- 3
- 36
- 45
0
votes
2 answers
VueJS transition-group is not working on images, how can I fade images?
I'm trying to create an image slider, which fades the images. Image 1 should fade-out at the same moment as image 2 fades in. In other words: there shouldn't be a gap between them. Right now it does nothing like fading. The code is working, as so…
Jeffrey
- 21
- 3
0
votes
1 answer
Animating duplicate list items added with v-for
I want to animate list items in a loop with vue's transition group. I want always the added item to be animated. But I always got the last one animated. Research in docs/questions indicated this normally is a keying problem: Key needs unique id. Now…
Joel
- 11
- 3
0
votes
1 answer
smooth Nuxt/Vue transition on the rest of the page when displaying and hidding a list of elements
I got a list of grid items , and a button switching between "see more" and "see less". On click on the "see more" button, all the list is displayed. on click on the see less, only 3 items are displayed. we got a nice transition when displaying all…
Swaghi
- 3
- 3
0
votes
1 answer
Adding transition animation when adding multiple elements to the list in VueJS
So, take a look on this fiddle. I want to add transition animation from vue feature when adding new multiple element to the list rendered. I already tried to add transition-group with the attribute tag="div". However, the elements still added…
Kevin Chandra
- 675
- 1
- 9
- 16
0
votes
1 answer
How can I preload images for use in a transition-group
I have a transition-group containing two or more images. This is working, but now I want to preload the next image in line.
This is what I have now:
Paul
- 336
- 1
- 3
- 11