-
-
Notifications
You must be signed in to change notification settings - Fork 7.9k
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
Transition should sniff for Teleport #5836
Comments
Yes I'm agree with you. For me it look's like :
and in the component ModalWindow : |
I'm also interested in this |
I made a PR. feel free to review. |
Hello, could teleport support <div class="pinned">
<TransitionGroup id="id" name="animation-class">
<TransitionGroup/>
</div>
<div>
<Teleport :disabled="!shouldPin" v-if="shouldShow"></Teleport>
</div> |
I just create a project just like yours: Teleport-in-Transition |
@MarkSky The PR is not merged. |
I know. |
@MarkSky |
I understand now, thank you. |
Was there a reason this PR was never merged ? |
Still waiting when it'll be released |
What problem does this feature solve?
Currently, it's not possible to wrap a teleport by a transition because
Component inside <Transition> renders non-element root node that cannot be animated.
While I agree that transition shouldn't start trying to find the first actual element it can apply classes to in custom components, I think that there should be an exception for Teleport.
It's not an uncommon use case that you want to teleport some popover or modal to the body and want to add a transition when it appears or gets removed. I am aware that you can always transition the contents of the stuff you are teleporting but that is less flexible and composable. e.g. a reusable component that always ports itself to the body currently can't be wrapped by a custom transition.
Both components are part of the core library and also don't work as normal components do. So I think it shouldn't be a problem if the transition component sniffs if its child is a teleport and applies the transition to the teleported element instead. Ofc that would require that the teleport only consists of a single root but that is a given (the error message already makes that clear and could be changed for the teleport case:
SyntaxError: <Transition> expects exactly one child element or component.
)What does the proposed API look like?
The text was updated successfully, but these errors were encountered: