Transition Group Move Class doesn't work with display flex

[ralphchristianeclipse]

https://jsfiddle.net/RalphChristianEclipse/z11fe07p/715/
#4900
i think this is the same issue ?

First the problem is move-class is not occuring when i remove an item that is my problem
Second i dont use the name attribute for doing enter or leave animations
cause i use animate.css for it

Please read carefully about this

I'm also reading the docs and all of it before posting

Vue.js version

2.1.10

Reproduction Link

• No Vue Components Used
  https://jsfiddle.net/RalphChristianEclipse/9L8gvuej/5/
• Vue Material used
  https://jsfiddle.net/RalphChristianEclipse/9L8gvuej/7/

Steps to reproduce

No Vue Components Used Steps:

• Create transition group with display: flex
• Create an array that will be used as a test
• Assign card-move class to move-class of transition-group
• Create a div element that uses v-for to list down all the test elements in array
• Add a click event handler for removing an item

Vue Material Used Steps:

• Create a transtion group with class md-layout
• Create an array for test
• Assign card-move class to move-class of transition-group
• Create another md-layout inside the transition-group with md-flex-{type}="33"
• Add a click.native handler for md-layout that removes items
• create an md-card that uses v-for to list down the elements of the test array

What is Expected?

• Smooth moving transition when changing positions

What is actually happening?

• No Moving Transition happens

I'm also doing this with an empty array and firebase will push elements in realtime

The documentation states when items are in display: flex move-class will be appended when changes in array position happens or removals

[posva]

Please, take the time to read the docs a bit more before opening issues and use the forum or StackOverflow to ask questions...

Use this: https://vuejs.org/v2/guide/transitions.html
Here's a working version https://jsfiddle.net/wtt1oh6f/

[ralphchristianeclipse]

@posva
why close the issue i don't have problems on the enter-active-class or leave-active-class

im using animate.css for that purpose

the title says it all the move-class is not used while removing items

First the problem is move-class is not occuring when i remove an item that is my problem
Second i dont use the name attribute for doing enter or leave animations
cause i use animate.css for it

Please read carefully about this

I'm also reading the docs and all of it before posting

[posva]

I'm closing it because you keep doing the same thing: asking questions without taking into account others' time
Here's the fiddle with moving animations: https://jsfiddle.net/posva/L717s024/

The fiddle you posted wasn't even changing the order of the list. I'd have expected you to at least try out shuffling the array and test things like in the guide.

[ralphchristianeclipse]

@posva
There is a question but about the reference on the issue about empty arrays which i think maybe the cause

but the thing here its the move class that is not appended using move-class attribute

you can see on the fiddle that the cards don't move smoothly when an element is removed between it

the classes that's appended are enter, active, leave and to classes only not the move class

I've also tested it but it's buggy when its an empty array and fetching data from an api or firebase will put elements to it but move animations doesn't work

[ralphchristianeclipse]

@posva

You can check out the image here and look closely that move-class attribute is not apended to other elements also

[ralphchristianeclipse]

@posva
See the difference here on the main example about transition-group move class

[ralphchristianeclipse]

don't know but i'm doing it in development with hot reloading it works when hot reloaded but when i reload manually it doesn't work again

[posva]

the classes that's appended are enter, active, leave and to classes only not the move class

The move class is not appended when entering or leaving: https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions
Basically, you need something like position: absolute like in the examples

I'm locking this because you're not following the Contributing Guide and wasting time for anyone reading the issue (including yourself).

It's not the first, nor the second time you have disguised questions as issues in vue repos, so please, next time take the time to make sure there's a bug by reading a bit more the docs and seeking for help in forums. Thanks

edit: I deleted the comment you posted on the other issue because it was spam. Please, don't do that again