vue2-transitions icon indicating copy to clipboard operation
vue2-transitions copied to clipboard

Support for transition mode

Open tonyketcham opened this issue 3 years ago • 0 comments

Problem

Transitioning between two elements via wrapping two v-if v-else blocks with a transition element results in both elements appearing stacked on top of each other temporarily rather than waiting on one block to finish transitioning out before allowing the other block to transition in. Here's an example of that problem in the Vue docs.

Proposed Solution

Adding a prop that allows the user to hook into and specify the transition mode. For example, being able to have:

<template>
  <transition :mode="mode">...</transition>
</template>

<script>
export default {
...
  props: {
    mode: {
      type: String,
      default: 'out-in',
    },
    ...
  },
...
}
</script>

This change would fix the issue by default and allow users to customize the transitioning behavior between objects if they want to deviate from that behavior.

tonyketcham avatar Apr 30 '21 19:04 tonyketcham