Skip to content

No exit animations unless exitBeforeEnter is true #19

@sebastiansandqvist

Description

@sebastiansandqvist

I'd like for an exit animation to run in parallel with the incoming entry animation. For example, when the currentItem() here changes:

<Presence {/* exitBeforeEnter */} initial={false}>
  <Show when={currentItem()} keyed>
    {(item) => (
      <Motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0}}
        transition={{ duration: 0.3 }}
       >
        {item.title}
      </Motion.div>
    )}
  </Show>
</Presence>

Right now when I do this, the current item's exit is immediate and only the incoming item's entry is animated. If I add exitBeforeEnter then I do get both animations, but not in parallel.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions