You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
For each MenuButton that is rendered in the TransitionGroup, they all have to conform to the animation named after the name attribute in the TransitionGroup. Each separate item cannot have a transition animation that is different from the one named in the group. But what if you wanted one element to have a different animation behaviour? An example in this case would be clicking on one of the buttons, and that button would play a different exit animation compared to the rest of the unclicked buttons in the list.
The only other way I can think of achieving this is to create a Transition inside each child of the v-for tagged element, and change the name in the one transition for the element you want to have a different animation for. I haven't tried this yet, and I'm not sure if I'd like code to be refactored in this way, because it doesn't seem as practical and easy to code as having them all in the TransitionGroup, and the list also can't take advantage of TransitionGroup's utilities (such as move animations).
Please let me know if you have any questions, or if there's a better way to achieve this without any modification to the current Transition system.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Either I'm missing something, or there may not be a way to support this as of yet. Take the following code:
For each
MenuButton
that is rendered in theTransitionGroup
, they all have to conform to the animation named after the name attribute in theTransitionGroup
. Each separate item cannot have a transition animation that is different from the one named in the group. But what if you wanted one element to have a different animation behaviour? An example in this case would be clicking on one of the buttons, and that button would play a different exit animation compared to the rest of the unclicked buttons in the list.The only other way I can think of achieving this is to create a
Transition
inside each child of the v-for tagged element, and change the name in the one transition for the element you want to have a different animation for. I haven't tried this yet, and I'm not sure if I'd like code to be refactored in this way, because it doesn't seem as practical and easy to code as having them all in theTransitionGroup
, and the list also can't take advantage ofTransitionGroup
's utilities (such as move animations).Please let me know if you have any questions, or if there's a better way to achieve this without any modification to the current Transition system.
Beta Was this translation helpful? Give feedback.
All reactions