From c45783e6bf8efec95974caeb4307cdcdd4a97665 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 2 Oct 2020 16:05:59 +0100 Subject: [PATCH 1/7] fix: remove references to old versions of Vue 2 --- src/guide/transitions-enterleave.md | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index ab99f7b593..347004f59d 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -79,13 +79,13 @@ There are six classes applied for enter/leave transitions. 2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition. -3. `v-enter-to`: **Only available in versions 2.1.8+.** Ending state for enter. Added one frame after element is inserted (at the same time `v-enter` is removed), removed when transition/animation finishes. +3. `v-enter-to`: Ending state for enter. Added one frame after element is inserted (at the same time `v-enter` is removed), removed when transition/animation finishes. 4. `v-leave-from`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame. 5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition. -6. `v-leave-to`: **Only available in versions 2.1.8+.** Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave` is removed), removed when the transition/animation finishes. +6. `v-leave-to`: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave` is removed), removed when the transition/animation finishes. ![Transition Diagram](/images/transitions.svg) @@ -210,10 +210,10 @@ You can also specify custom transition classes by providing the following attrib - `enter-from-class` - `enter-active-class` -- `enter-to-class` (2.1.8+) +- `enter-to-class` - `leave-from-class` - `leave-active-class` -- `leave-to-class` (2.1.8+) +- `leave-to-class` These will override the conventional class names. This is especially useful when you want to combine Vue's transition system with an existing CSS animation library, such as [Animate.css](https://daneden.github.io/animate.css/). @@ -263,8 +263,6 @@ However, in some cases you may want to have both on the same element, for exampl TODO: validate and provide an example -> New in 2.2.0+ - In most cases, Vue can automatically figure out when the transition has finished. By default, Vue waits for the first `transitionend` or `animationend` event on the root transition element. However, this may not always be desired - for example, we may have a choreographed transition sequence where some nested inner elements have a delayed transition or a longer transition duration than the root transition element. In such cases you can specify an explicit transition duration (in milliseconds) using the `duration` prop on the `` component: @@ -580,8 +578,7 @@ new Vue({ .component-fade-leave-active { transition: opacity 0.3s ease; } -.component-fade-enter, .component-fade-leave-to -/* .component-fade-leave-active below version 2.1.8 */ { +.component-fade-enter, .component-fade-leave-to { opacity: 0; } ``` From 8f32fbbd988b17c42e6726ef3ab91f2e67bbafa6 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 2 Oct 2020 16:09:32 +0100 Subject: [PATCH 2/7] fix: comment out TODOs --- src/guide/transitions-enterleave.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index 347004f59d..8a76e08444 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -261,7 +261,7 @@ However, in some cases you may want to have both on the same element, for exampl ### Explicit Transition Durations -TODO: validate and provide an example + In most cases, Vue can automatically figure out when the transition has finished. By default, Vue waits for the first `transitionend` or `animationend` event on the root transition element. However, this may not always be desired - for example, we may have a choreographed transition sequence where some nested inner elements have a delayed transition or a longer transition duration than the root transition element. @@ -448,7 +448,7 @@ We discuss [transitioning between components](#transitioning-between-components) It's actually possible to transition between any number of elements, either by using multiple `v-if`s or binding a single element to a dynamic property. For example: -TODO: rewrite example and put in codepen example + ```html @@ -548,7 +548,7 @@ We can use this to coordinate more expressive movement, such as a folding card, Transitioning between components is even simpler - we don't even need the `key` attribute. Instead, we wrap a [dynamic component](component-basics.html#dynamic-components): -TODO: update to Vue 3 + ```html @@ -583,4 +583,4 @@ new Vue({ } ``` -TODO: example + From 6300fe43cef14a301d31302480881062a7523dfc Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 2 Oct 2020 16:11:15 +0100 Subject: [PATCH 3/7] fix: update references to v-enter and v-leave --- src/guide/transitions-enterleave.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index 8a76e08444..45d9d1b19a 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -79,13 +79,13 @@ There are six classes applied for enter/leave transitions. 2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition. -3. `v-enter-to`: Ending state for enter. Added one frame after element is inserted (at the same time `v-enter` is removed), removed when transition/animation finishes. +3. `v-enter-to`: Ending state for enter. Added one frame after element is inserted (at the same time `v-enter-from` is removed), removed when transition/animation finishes. 4. `v-leave-from`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame. 5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition. -6. `v-leave-to`: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave` is removed), removed when the transition/animation finishes. +6. `v-leave-to`: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave-from` is removed), removed when the transition/animation finishes. ![Transition Diagram](/images/transitions.svg) From d297fc2dc3751d357ce68c0b04c25f0eace25dec Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 2 Oct 2020 16:19:49 +0100 Subject: [PATCH 4/7] fix: update an example to match the CodePen --- src/guide/transitions-enterleave.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index 45d9d1b19a..ae24229998 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -153,7 +153,7 @@ CSS animations are applied in the same way as CSS transitions, the difference be Here's an example, omitting prefixed CSS rules for the sake of brevity: ```html -
+

@@ -189,7 +189,7 @@ Vue.createApp(Demo).mount('#demo') transform: scale(0); } 50% { - transform: scale(1.5); + transform: scale(1.25); } 100% { transform: scale(1); From e36259060e5c31a7a939df08945eafb48698acbd Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 2 Oct 2020 16:27:49 +0100 Subject: [PATCH 5/7] fix: correct typos --- src/guide/transitions-enterleave.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index ae24229998..ace9753780 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -345,7 +345,7 @@ methods: { These hooks can be used in combination with CSS transitions/animations or on their own. -When using JavaScript-only transitions, **the `done` callbacks are required for the `enter` and `leave` hooks**. Otherwise, the hooks will be called synchronously and the transition will finish immediately. Adding `:css="false"` will also let know Vue to skip CSS detection. Aside from being slightly more performant, this also prevents CSS rules from accidentally interfering with the transition. +When using JavaScript-only transitions, **the `done` callbacks are required for the `enter` and `leave` hooks**. Otherwise, the hooks will be called synchronously and the transition will finish immediately. Adding `:css="false"` will also let Vue know to skip CSS detection. Aside from being slightly more performant, this also prevents CSS rules from accidentally interfering with the transition. Now let's dive into an example. Here's a JavaScript transition using [GreenSock](https://greensock.com/): @@ -535,7 +535,7 @@ Now let's update the transition for our on/off buttons with `out-in`: With one attribute addition, we've fixed that original transition without having to add any special styling. -We can use this to coordinate more expressive movement, such as a folding card, as demonstrated below. It's actually two elements transitioning between eachother, but since the beginning and end states are scaling the same: horizontally to 0, it appears like one fluid movement. This type of slight-of-hand can be very useful for realistic UI microinteractions: +We can use this to coordinate more expressive movement, such as a folding card, as demonstrated below. It's actually two elements transitioning between each other, but since the beginning and end states are scaling the same: horizontally to 0, it appears like one fluid movement. This type of sleight-of-hand can be very useful for realistic UI microinteractions:

See the Pen From 9dfd07cc87b772857aef0231ccb3153ca4c8dd25 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 2 Oct 2020 16:38:33 +0100 Subject: [PATCH 6/7] fix: introduce some articles to improve the flow --- src/guide/transitions-enterleave.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index ace9753780..fd3bb9c7fc 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -75,15 +75,15 @@ When an element wrapped in a `transition` component is inserted or removed, this There are six classes applied for enter/leave transitions. -1. `v-enter-from`: Starting state for enter. Added before element is inserted, removed one frame after element is inserted. +1. `v-enter-from`: Starting state for enter. Added before the element is inserted, removed one frame after the element is inserted. -2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition. +2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before the element is inserted, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition. -3. `v-enter-to`: Ending state for enter. Added one frame after element is inserted (at the same time `v-enter-from` is removed), removed when transition/animation finishes. +3. `v-enter-to`: Ending state for enter. Added one frame after the element is inserted (at the same time `v-enter-from` is removed), removed when the transition/animation finishes. 4. `v-leave-from`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame. -5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition. +5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when a leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition. 6. `v-leave-to`: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave-from` is removed), removed when the transition/animation finishes. From c1f0b13ddf753cca1eb5daa164b4f2f2031fd15f Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Fri, 2 Oct 2020 16:42:09 +0100 Subject: [PATCH 7/7] fix: migrate an example to Vue 3 --- src/guide/transitions-enterleave.md | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md index fd3bb9c7fc..8d2ad970bd 100644 --- a/src/guide/transitions-enterleave.md +++ b/src/guide/transitions-enterleave.md @@ -548,19 +548,22 @@ We can use this to coordinate more expressive movement, such as a folding card, Transitioning between components is even simpler - we don't even need the `key` attribute. Instead, we wrap a [dynamic component](component-basics.html#dynamic-components): - - ```html - - - +

``` ```js -new Vue({ - el: '#transition-components-demo', - data: { - view: 'v-a' +const Demo = { + data() { + return { + view: 'v-a' + } }, components: { 'v-a': { @@ -570,7 +573,9 @@ new Vue({ template: '
Component B
' } } -}) +} + +Vue.createApp(Demo).mount('#demo') ``` ```css @@ -578,7 +583,9 @@ new Vue({ .component-fade-leave-active { transition: opacity 0.3s ease; } -.component-fade-enter, .component-fade-leave-to { + +.component-fade-enter-from, +.component-fade-leave-to { opacity: 0; } ```