Skip to content

Measurement Anchor Mode for <transition-group> #3131

Closed
@eli-crow

Description

@eli-crow

What problem does this feature solve?

Currently, <transition-group>s measure the position of the element from the top left of its bounding box. This works well for purely left-to-right and top-to-bottom situations. However, in some cases, children may change in ways that suggest they are anchored at the bottom or right of their bounding box. This can cause the element to appear to unintuitively jerk up before transitioning again to the correct position.

One example (my use case) is a chat-style application where an item within the chat message list has a part that is hidden after a certain amount of time. In my case, scrolling in the list starts from the bottom. I want the older messages in the list to transition downward to close the now vacant space without causing the changed element to jerk up first. Currently I see no easy workaround to enable me to use transition-group without this jerking. I may have to re-implement the FLIP animation myself, which feels bad.

Another use case is right-to-left text modes.

Currently, in the source code, left and top properties of ClientRect are hard coded. Adding an option to instead measure the delta from the right and bottom of the rect would be a simple change that would enable me use transition-group for my use case.

Codesandbox showing actual and desired behavior: https://codesandbox.io/s/transition-group-bottom-anchored-example-nv3bh?file=/src/App.vue

What does the proposed API look like?

Add an anchor prop, where the options are:

anchor = "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left" where each implies measuring from that corner or midpoint.

Or, more simply:

anchor = "start" | "end" where "start" means "measure from the top left" and "end" means "measure from the bottom right"

Example:

<transition-group tag="ul" name="transition-name" anchor="end" class="list">
    <li class="list-item" v-for="item in items" :key="item.key">{{ item.text }}</li>
</transition-group>

In this example, .list-items appear to have a "downward gravity," so when a .list-item changes in height, the items above it will move down, but the .list-item's bottom edge will not have moved.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions