Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

<transition> API changes #105

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

Merged
merged 3 commits into from
Jan 6, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions 68 active-rfcs/0017-transition-as-root.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
- Start Date: 2019-11-29
- Target Major Version: 3.x
- Reference Issues: N/A
- Implementation PR: N/A

# Summary

Using `<transition>` as component's root will no longer trigger transitions when the component is toggled from the outside.

# Basic example

Before:

``` html
<!-- modal component -->
<template>
<transition>
<div class="modal"><slot/></div>
</transition>
</template>

<!-- usage -->
<modal v-if="showModal">hello</modal>
```

After: expose a prop to control the toggle

``` html
<!-- modal component -->
<template>
<transition>
<div v-if="show" class="modal"><slot/></div>
</transition>
</template>

<!-- usage -->
<modal :show="showModal">hello</modal>
```

# Motivation

The current 2.x behavior worked by accident, but with some quirks. Instead of disabling the usage, we added more fix to make it work because some users were relying on the behavior. However, semantically this usage does not make sense: by definition, the `<transition>` component works by reacting to the toggling of its inner content, not the toggling of itself:

``` html
<!-- this does not work -->
<transition v-if="show">
<div></div>
</transition>

<!-- this is expected usage -->
<transition>
<div v-if="show"></div>
</transition>
```

In supporting the 2.x behavior, it also created a number of complexities when it comes to determining the `appear` status of the transition.

# Detailed design

In 3.0, toggling a component with `<transition>` as its root node will no longer trigger the transition. Instead, the component should expose a boolean prop to control the presence of the content inside `<transition>`.

# Drawbacks

The old behavior cannot be supported simultaneously with the new one in the compat build.

# Adoption strategy

Reliance on the old behavior can be found through static analysis by detecting root `<transition>` components with no `v-if` or `v-show` directives on its inner content. The migration tool can then guide the user to upgrade these cases.
61 changes: 61 additions & 0 deletions 61 active-rfcs/0018-transition-class-change.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
- Start Date: 2019-11-29
- Target Major Version: 3.x
- Reference Issues: N/A
- Implementation PR: N/A

# Summary

- Rename the `v-enter` transition class to `v-enter-from`
- Rename the `v-leave` transition class to `v-leave-from`

# Basic example

``` css
/* before */
.v-enter, .v-leave-to{
opacity: 0;
}

/* after */
.v-enter-from, .v-leave-to{
opacity: 0;
}
```

# Motivation

Before v2.1.8, we only had two transition classes each transition direction. For example for the enter transition, we had `v-enter` and `v-enter-active`. In v2.1.8, we introduced `v-enter-to` to address the [timing gap between enter/leave transitions](https://github.com/vuejs/vue/issues/4510), however, for backwards compatibility the `v-enter` name was untouched:

``` css
.v-enter, .v-leave-to {
opacity: 0;
}
.v-leave, .v-enter-to {
opacity: 1
}
```

The asymmetry and lack of explicitness in `.v-enter` and `.v-leave` makes these classes a bit mind bending to read and understand. This is why we are proposing to change the above to:

``` css
.v-enter-from, .v-leave-to {
opacity: 0;
}
.v-leave-from, .v-enter-to {
opacity: 1
}
```

...which better indicates what state these classes apply to.

# Detailed design

- `.v-enter` is renamed to `.v-enter-from`
- `.v-leave` is renamed to `.v-leave-from`
- The `<transition>` component's related prop names are also changed:
- `leave-class` is renamed to `leave-from-class` (in render functions or JSX, can be written as `leaveFromClass`)
- `enter-class` is renamed to `enter-from-class` (in render functions or JSX, can be written as `enterFromClass`)

# Adoption strategy

Old class names can be easily supported in the compat build, with warnings to guide migration.
Morty Proxy This is a proxified and sanitized view of the page, visit original site.