From ce5f478d2eddb00a2a4ddebd320630fc6c4b44f3 Mon Sep 17 00:00:00 2001 From: Evgeniy Gromin Date: Thu, 13 Jun 2024 06:03:31 +0400 Subject: [PATCH] =?UTF-8?q?=D0=9B=D0=BE=D0=BA=D0=B0=D0=BB=D0=B8=D0=B7?= =?UTF-8?q?=D0=B0=D1=86=D0=B8=D1=8F=20docs/1.getting-started/5.transitions?= =?UTF-8?q?.md=20(#24)=20(#167)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(docs): translate docs/1.getting-started/5.transitions.md (#24) Signed-off-by: Evgeniy Gromin * [autofix.ci] apply automated fixes * fix(docs): fix mistakes in docs/1.getting-started/5.transitions.md (#24) Signed-off-by: Evgeniy Gromin * [autofix.ci] apply automated fixes --------- Signed-off-by: Evgeniy Gromin Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- docs/1.getting-started/5.transitions.md | 123 ++++++++++++------------ 1 file changed, 61 insertions(+), 62 deletions(-) diff --git a/docs/1.getting-started/5.transitions.md b/docs/1.getting-started/5.transitions.md index 25edebbca841..629bde974cc9 100644 --- a/docs/1.getting-started/5.transitions.md +++ b/docs/1.getting-started/5.transitions.md @@ -1,16 +1,16 @@ --- title: 'Transitions' -description: Apply transitions between pages and layouts with Vue or native browser View Transitions. +description: Применяйте переходы между страницами и лейаутами с помощью Vue или нативных View Transitions браузера. navigation.icon: i-ph-exclude-square-duotone --- ::note -Nuxt leverages Vue's [``](https://ru.vuejs.org/guide/built-ins/transition.html#the-transition-component) component to apply transitions between pages and layouts. +Nuxt использует компонент Vue [``](https://ru.vuejs.org/guide/built-ins/transition.html#the-transition-component) для применения переходов между страницами и лейаутами. :: -## Page transitions +## Переходы между страницами -You can enable page transitions to apply an automatic transition for all your [pages](/docs/guide/directory-structure/pages). +Вы можете включить переходы между страницами, чтобы применить автоматический переход для всех ваших [страниц](/docs/guide/directory-structure/pages). ```ts twoslash [nuxt.config.ts] export default defineNuxtConfig({ @@ -21,10 +21,10 @@ export default defineNuxtConfig({ ``` ::note -If you are changing layouts as well as page, the page transition you set here will not run. Instead, you should set a [layout transition](/docs/getting-started/transitions#layout-transitions). +Если вы меняете лейауты, а также страницу, переход страницы, который вы здесь задали, не будет запущен. Вместо этого следует задать [переход лейаута](/docs/getting-started/transitions#layout-transitions). :: -To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/guide/directory-structure/app): +Чтобы начать добавлять переходы между страницами, добавьте следующий CSS в ваш [`app.vue`](/docs/guide/directory-structure/app): ::code-group @@ -49,8 +49,8 @@ To start adding transition between your pages, add the following CSS to your [`a ```vue [pages/index.vue] ``` @@ -58,21 +58,21 @@ To start adding transition between your pages, add the following CSS to your [`a ```vue [pages/about.vue] ``` :: -This produces the following result when navigating between pages: +Это дает следующий результат при навигации между страницами: -To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/docs/api/utils/define-page-meta) of the page: +Чтобы задать другой переход для страницы, установите ключ `pageTransition` в [`definePageMeta`](/docs/api/utils/define-page-meta) страницы: ::code-group @@ -107,15 +107,15 @@ definePageMeta({ :: -Moving to the about page will add the 3d rotation effect: +Переход на страницу «О нас» добавит эффект 3D-вращения: -## Layout transitions +## Переходы лейаутов -You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/guide/directory-structure/layouts). +Вы можете включить переходы лейаутов, чтобы применить автоматический переход для всех [лейаутов](/docs/guide/directory-structure/layouts). ```ts twoslash [nuxt.config.ts] export default defineNuxtConfig({ @@ -125,7 +125,7 @@ export default defineNuxtConfig({ }) ``` -To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/guide/directory-structure/app): +Чтобы начать добавлять переходы между страницами и лейаутами, добавьте следующий CSS в ваш [`app.vue`](/docs/guide/directory-structure/app): ::code-group @@ -151,7 +151,7 @@ To start adding transition between your pages and layouts, add the following CSS ```vue [layouts/default.vue] @@ -166,7 +166,7 @@ div { ```vue [layouts/orange.vue] @@ -183,8 +183,8 @@ div { ```vue [pages/index.vue] ``` @@ -198,21 +198,21 @@ definePageMeta({ ``` :: -This produces the following result when navigating between pages: +Это дает следующий результат при навигации между страницами: -Similar to `pageTransition`, you can apply a custom `layoutTransition` to the page component using `definePageMeta`: +Подобно `pageTransition`, вы можете применить пользовательский `layoutTransition` к компоненту страницы, используя `definePageMeta`: ```vue twoslash [pages/about.vue] ``` -## Global settings +## Глобальные настройки -You can customize these default transition names globally using `nuxt.config`. +Вы можете настроить названия переходов по умолчанию глобально с помощью `nuxt.config`. -Both `pageTransition` and `layoutTransition` keys accept [`TransitionProps`](https://ru.vuejs.org/api/built-in-components.html#transition) as JSON serializable values where you can pass the `name`, `mode` and other valid transition-props of the custom CSS transition. +Оба ключа `pageTransition` и `layoutTransition` принимают [`TransitionProps`](https://ru.vuejs.org/api/built-in-components.html#transition) как сериализуемые значения JSON, в которые можно передать `name`, `mode` и другие допустимые свойства пользовательского перехода CSS. ```ts twoslash [nuxt.config.ts] export default defineNuxtConfig({ app: { pageTransition: { name: 'fade', - mode: 'out-in' // default + mode: 'out-in' // по умолчанию }, layoutTransition: { name: 'slide', - mode: 'out-in' // default + mode: 'out-in' // по умолчанию } } }) ``` ::warning -If you change the `name` property, you also have to rename the CSS classes accordingly. +Если вы измените свойство `name`, вам также придется соответствующим образом переименовать CSS-классы. :: -To override the global transition property, use the `definePageMeta` to define page or layout transitions for a single Nuxt page and override any page or layout transitions that are defined globally in `nuxt.config` file. +Чтобы переопределить глобальное свойство перехода, используйте `definePageMeta`, чтобы определить переходы страниц или лейаутов для одной страницы Nuxt и переопределить любые переходы страниц или лейаутов, которые определены глобально в файле `nuxt.config`. ```vue twoslash [pages/some-page.vue] ``` -## Disable Transitions +## Отключение переходов -`pageTransition` and `layoutTransition` can be disabled for a specific route: +`pageTransition` и `layoutTransition` можно отключить для определенного маршрута: ```vue twoslash [pages/some-page.vue] ``` -Or globally in the `nuxt.config`: +Или глобально в `nuxt.config`: ```ts twoslash [nuxt.config.ts] export default defineNuxtConfig({ @@ -287,11 +287,11 @@ export default defineNuxtConfig({ }) ``` -## JavaScript Hooks +## Хуки JavaScript -For advanced use-cases, you can use JavaScript hooks to create highly dynamic and custom transitions for your Nuxt pages. +Для расширенных вариантов использования вы можете использовать JavaScript-хуки для создания высокодинамичных и настраиваемых переходов для страниц Nuxt. -This way presents perfect use-cases for JavaScript animation libraries such as [GSAP](https://gsap.com). +Этот способ представляет собой идеальный пример использования библиотек анимации JavaScript, таких как [GSAP](https://gsap.com). ```vue twoslash [pages/some-page.vue]