Skip to content

Add in transition migration guide docs #428

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 7 commits into from
Aug 25, 2020
Merged
144 changes: 88 additions & 56 deletions src/.vuepress/config.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
const sidebar = {
cookbook: [
{
title: 'Cookbook',
collapsable: false,
children: ['/cookbook/', '/cookbook/editable-svg-icons']
}
],
guide: [
{
cookbook: [{
title: 'Cookbook',
collapsable: false,
children: ['/cookbook/', '/cookbook/editable-svg-icons']
}],
guide: [{
title: 'Essentials',
collapsable: false,
children: [
Expand Down Expand Up @@ -63,8 +60,7 @@ const sidebar = {
{
title: 'Advanced Guides',
collapsable: false,
children: [
{
children: [{
title: 'Reactivity',
children: [
'/guide/reactivity',
Expand Down Expand Up @@ -130,6 +126,7 @@ const sidebar = {
'migration/keycode-modifiers',
'migration/render-function-api',
'migration/slots-unification',
'migration/transition',
'migration/v-model'
]
},
Expand Down Expand Up @@ -175,23 +172,21 @@ const sidebar = {
},
'/api/composition-api'
],
examples: [
{
title: 'Examples',
collapsable: false,
children: [
'/examples/markdown',
'/examples/commits',
'/examples/grid-component',
'/examples/tree-view',
'/examples/svg',
'/examples/modal',
'/examples/elastic-header',
'/examples/select2',
'/examples/todomvc'
]
}
]
examples: [{
title: 'Examples',
collapsable: false,
children: [
'/examples/markdown',
'/examples/commits',
'/examples/grid-component',
'/examples/tree-view',
'/examples/svg',
'/examples/modal',
'/examples/elastic-header',
'/examples/select2',
'/examples/todomvc'
]
}]
}

module.exports = {
Expand All @@ -201,20 +196,21 @@ module.exports = {
[
'link',
{
href:
'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
href: 'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
rel: 'stylesheet'
}
],
[
'link',
{
href:
'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
href: 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
rel: 'stylesheet'
}
],
['link', { rel: 'icon', href: '/logo.png' }],
['link', {
rel: 'icon',
href: '/logo.png'
}],
[
'script',
{
Expand All @@ -231,37 +227,68 @@ module.exports = {
],
themeConfig: {
logo: '/logo.png',
nav: [
{
nav: [{
text: 'Docs',
ariaLabel: 'Documentation Menu',
items: [
{ text: 'Guide', link: '/guide/introduction' },
{ text: 'Style Guide', link: '/style-guide/' },
{ text: 'Cookbook', link: '/cookbook/' },
{ text: 'Examples', link: '/examples/markdown' }
items: [{
text: 'Guide',
link: '/guide/introduction'
},
{
text: 'Style Guide',
link: '/style-guide/'
},
{
text: 'Cookbook',
link: '/cookbook/'
},
{
text: 'Examples',
link: '/examples/markdown'
}
]
},
{ text: 'API Reference', link: '/api/application-config' },
{
text: 'API Reference',
link: '/api/application-config'
},
{
text: 'Ecosystem',
items: [
{
items: [{
text: 'Community',
ariaLabel: 'Community Menu',
items: [
{ text: 'Team', link: '/community/team/' },
{ text: 'Partners', link: '/community/partners' },
{ text: 'Join', link: '/community/join/' },
{ text: 'Themes', link: '/community/themes/' }
items: [{
text: 'Team',
link: '/community/team/'
},
{
text: 'Partners',
link: '/community/partners'
},
{
text: 'Join',
link: '/community/join/'
},
{
text: 'Themes',
link: '/community/themes/'
}
]
},
{
text: 'Official Projects',
items: [
{ text: 'Vue Router', link: 'https://router.vuejs.org/' },
{ text: 'Vuex', link: 'https://vuex.vuejs.org/' },
{ text: 'Vue CLI', link: 'https://cli.vuejs.org/' },
items: [{
text: 'Vue Router',
link: 'https://router.vuejs.org/'
},
{
text: 'Vuex',
link: 'https://vuex.vuejs.org/'
},
{
text: 'Vue CLI',
link: 'https://cli.vuejs.org/'
},
{
text: 'Vue Test Utils',
link: 'https://vue-test-utils.vuejs.org/'
Expand All @@ -270,24 +297,29 @@ module.exports = {
text: 'Devtools',
link: 'https://github.com/vuejs/vue-devtools'
},
{ text: 'Weekly news', link: 'https://news.vuejs.org/' }
{
text: 'Weekly news',
link: 'https://news.vuejs.org/'
}
]
}
]
},
{
text: 'Support Vue',
link: '/support-vuejs/',
items: [
{
items: [{
text: 'One-time Donations',
link: '/support-vuejs/#one-time-donations'
},
{
text: 'Recurring Pledges',
link: '/support-vuejs/#recurring-pledges'
},
{ text: 'T-Shirt Shop', link: 'https://vue.threadless.com/' }
{
text: 'T-Shirt Shop',
link: 'https://vue.threadless.com/'
}
]
}
],
Expand Down
60 changes: 60 additions & 0 deletions src/guide/migration/transition.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
title: Transition Class Change
badges:
- breaking
---

# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />

## Overview

The `v-enter` transition class has been renamed to `v-enter-from` and the `v-leave` transition class has been renamed to `v-leave-from`.

## 2.x Syntax

Before v2.1.8, we had two transition classes for each transition direction: initial and active states.

In v2.1.8, we introduced `v-enter-to` to address the timing gap between enter/leave transitions. However, for backward compatibility, the `v-enter` name was untouched:

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

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

This became confusing, as _enter_ and _leave_ were broad and not using the same naming convention as their class hook counterparts.

## 3.x Update

In order to be more explicit and legible, we have now renamed these initial state classes:

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

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

It's now much clearer what the difference between these states is.

The `<transition>` component's related prop names are also changed:

- `leave-class` is renamed to `leave-from-class` (can be written as `leaveFromClass` in render functions or JSX)
- `enter-class` is renamed to `enter-from-class` (can be written as `enterFromClass` in render functions or JSX)

## Migration Strategy

1. Replace instances of `.v-enter` to `.v-enter-from`
2. Replace instances of `.v-leave` to `.v-leave-from`
3. Replace instances of related prop names, as above.
close