Transition in QList
-
Hi,
I am struggling to find a way to apply an animation effect to a QList when the model changes. I tried unsuccessfully to enclose <q-item>s in a <transition-group tag=“div” name=“list”> (adding the relevant css classes).
BTW I would expect a native Quasar functionality for transitions of rows for both lists and tables.Am I missing something?
Thanks in advance.
-
There is no model for QList, so you can’t expect that Quasar does something special on model changes. It has no clue about them. The model change and reacting to them is up to userland since userland has to build the list.
Here is my attempt. It might get you going.
https://codepen.io/smolinari/pen/zYYrozo?editors=1010
Scott
-
Scott, thank you for your reply!
However, your example treats each item individually, and my purpose was to use the transition to notify the user about the extend of all changes (additions, removals and movements) triggered by applying a filter or sort order. Using animations based on <transition> tag instead of <transition-group> confuses the user rather than notifies them and the animation is aesthetically weird. In my case I have already solved the problem by replacing the <q-list> component by a simpler custom component.
Anyway, I don’t think that QList needs to be aware of the model in order to provide vue’s <transition-group> functionality as an option.
Thanks again,
Elias -
I think I understand what you mean now. Maybe ask in GH as a suggestion to see if it is possible. I’m not experienced enough to say yay or nay on that.
Scott
-
I’ll do ask for the functionality in GH. Thanks!
-
-
@skypart Yep, that “seems” to work but problem is items are wrapped in additional element which breaks some features depending on CSS (for example “separator” prop on “q-list”)
