From 5b0ced72b389fc06148131a5e1e3976706bccb88 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 29 Nov 2019 17:55:26 -0500
Subject: [PATCH 1/3] transition changes

---
 active-rfcs/0000-transition-as-root.md      | 68 +++++++++++++++++++++
 active-rfcs/0000-transition-class-change.md | 61 ++++++++++++++++++
 2 files changed, 129 insertions(+)
 create mode 100644 active-rfcs/0000-transition-as-root.md
 create mode 100644 active-rfcs/0000-transition-class-change.md

diff --git a/active-rfcs/0000-transition-as-root.md b/active-rfcs/0000-transition-as-root.md
new file mode 100644
index 00000000..8f20cdd4
--- /dev/null
+++ b/active-rfcs/0000-transition-as-root.md
@@ -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.
diff --git a/active-rfcs/0000-transition-class-change.md b/active-rfcs/0000-transition-class-change.md
new file mode 100644
index 00000000..23321314
--- /dev/null
+++ b/active-rfcs/0000-transition-class-change.md
@@ -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.

From 0ded51dff0321c609f01eced129bec8a491386dc Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 6 Jan 2020 15:56:34 -0500
Subject: [PATCH 2/3] Rename 0000-transition-as-root.md to
 0017-transition-as-root.md

---
 .../{0000-transition-as-root.md => 0017-transition-as-root.md}    | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename active-rfcs/{0000-transition-as-root.md => 0017-transition-as-root.md} (100%)

diff --git a/active-rfcs/0000-transition-as-root.md b/active-rfcs/0017-transition-as-root.md
similarity index 100%
rename from active-rfcs/0000-transition-as-root.md
rename to active-rfcs/0017-transition-as-root.md

From 925e1c506eed82ec85bbd3767ba10950d9221279 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 6 Jan 2020 15:56:50 -0500
Subject: [PATCH 3/3] Rename 0000-transition-class-change.md to
 0018-transition-class-change.md

---
 ...transition-class-change.md => 0018-transition-class-change.md} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename active-rfcs/{0000-transition-class-change.md => 0018-transition-class-change.md} (100%)

diff --git a/active-rfcs/0000-transition-class-change.md b/active-rfcs/0018-transition-class-change.md
similarity index 100%
rename from active-rfcs/0000-transition-class-change.md
rename to active-rfcs/0018-transition-class-change.md