-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Warning of <Transition>
with non-element root/multiple children isn't clear
#3338
Comments
You need one element at the root of your container for the transition to apply the classes: https://jsfiddle.net/1ax56d9p/ Maybe we should change the wording in the warning:
|
Yes, I understand this, I thought maybe Vue can check how many elements slot actually returns, because it is always single element in my case. But if not, I'm ok with your workaround. It's strange, though because component have multiple root nodes as well, but Vue handles this and transition on components is allowed. |
Although we can check whether it is a multi-root with a single element node. However, if |
I not sure which policy you are talking about. Vue already has dual handling of similar cases. From docs:
The same with attributes. |
<Transition>
with non-element root/multiple children isn't clear
vue's multiple root node is very weak, and many situations confuse developers |
Version
3.0.7
Reproduction link
https://jsfiddle.net/7q2gp3L4/
Steps to reproduce
Click "toggle" button
What is expected?
Opacity transition, as slot returns single element
What is actually happening?
Error: "Component inside renders non-element root node that cannot be animated"
This is regression, it worked with ver 3.0.3 and earlier: https://jsfiddle.net/r49yx6pq/
Possible workaround is to make separate components for each case: https://jsfiddle.net/vfk5h1en/, but it would be nice to get rid of it
<keep-alive>
simply explains why would I need it, it is not necessary for reproductionThe text was updated successfully, but these errors were encountered: