diff --git a/active-rfcs/0017-transition-as-root.md b/active-rfcs/0017-transition-as-root.md new file mode 100644 index 00000000..8f20cdd4 --- /dev/null +++ b/active-rfcs/0017-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 `` as component's root will no longer trigger transitions when the component is toggled from the outside. + +# Basic example + +Before: + +``` html + + + + +hello +``` + +After: expose a prop to control the toggle + +``` html + + + + +hello +``` + +# 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 `` component works by reacting to the toggling of its inner content, not the toggling of itself: + +``` html + + +
+
+ + + +
+
+``` + +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 `` 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 ``. + +# 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 `` 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/0018-transition-class-change.md b/active-rfcs/0018-transition-class-change.md new file mode 100644 index 00000000..23321314 --- /dev/null +++ b/active-rfcs/0018-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 `` 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.