diff --git a/src/guide/built-ins/transition.md b/src/guide/built-ins/transition.md index 416462dc..30b08d8b 100644 --- a/src/guide/built-ins/transition.md +++ b/src/guide/built-ins/transition.md @@ -8,26 +8,26 @@ import BetweenElements from './transition-demos/BetweenElements.vue' import BetweenComponents from './transition-demos/BetweenComponents.vue' -# Transition {#transition} +# ترنزیشن {#transition} -Vue offers two built-in components that can help work with transitions and animations in response to changing state: +Vue دو کامپوننت داخلی ارائه می کند که می تواند به کار با ترنزیشن‌ ها و انیمیشن ها در پاسخ به تغییر وضعیت یک متغیر کمک کند: -- `` for applying animations when an element or component is entering and leaving the DOM. This is covered on this page. +- `` برای اعمال انیمیشن ها بر روی یک عنصر یا کامپوننت هنگام ورود به DOM و یا خروج از آن است. این موضوع در این صفحه بررسی شده است. -- `` for applying animations when an element or component is inserted into, removed from, or moved within a `v-for` list. This is covered in [the next chapter](/guide/built-ins/transition-group). +- `` برای اعمال انیمیشن ها بر روی یک عنصر یا کامپوننت زمانی که به لیست `v-for` وارد شده و یا از آن حذف شده و یا اینکه در آن جا به جا شده است. این موضوع در [بخش بعدی ](/guide/built-ins/transition-group) بررسی شده است. -Aside from these two components, we can also apply animations in Vue using other techniques such as toggling CSS classes or state-driven animations via style bindings. These additional techniques are covered in the [Animation Techniques](/guide/extras/animation) chapter. +جدا از این دو کامپوننت، می توانیم انیمیشن ها را در Vue با استفاده از موارد دیگر نیز اعمال کنیم. تکنیک هایی مانند کلاس های CSS یا انیمیشن های state محور که به استایل متصل می شوند. این تکنیک های اضافی در بخش [تکنیک های انیمیشن](/guide/extras/animation) بررسی شده است -## The `` Component {#the-transition-component} +## کامپوننت `` {#the-transition-component} -`` is a built-in component: this means it is available in any component's template without having to register it. It can be used to apply enter and leave animations on elements or components passed to it via its default slot. The enter or leave can be triggered by one of the following: +`` یک کامپوننت داخلی است: این به آن معنی است که شما می توانید از آن در تمپلیت هر کامپوننتی بدون اینکه آن را ثبت کرده استفاده کنید. از آن می توانید برای انیمیشن های ورود و خروج هر عنصر یا کامپوننتی که در slot پیش فرض آن قرار گرفته است استفاده کنید. این انیمیشن می تواند توسط یکی از راه های زیر فعال شود: -- Conditional rendering via `v-if` -- Conditional display via `v-show` -- Dynamic components toggling via the `` special element -- Changing the special `key` attribute +- رندر شرطی با استفاده از `v-if` +- نمایش شرطی با استفاده از `v-show` +- فعال سازی کامپوننت های پویا با استفاده از عنصر ویژه `` +- تغییر شاخصه ویژه `key` -This is an example of the most basic usage: +این یک نمونه از ابتدایی ترین کاربرد است: ```vue-html @@ -37,7 +37,7 @@ This is an example of the most basic usage: ``` ```css -/* we will explain what these classes do next! */ +/* در ادامه توضیح خواهیم داد که این کلاس ها چه می کنند! */ .v-enter-active, .v-leave-active { transition: opacity 0.5s ease; @@ -63,44 +63,44 @@ This is an example of the most basic usage: :::tip -`` only supports a single element or component as its slot content. If the content is a component, the component must also have only one single root element. +`` فقط از یک عنصر یا کامپوننت به عنوان محتوای slot خود پشتیبانی می کند. اگر محتوا یک کامپوننت باشد، کامپوننت نیز باید تنها یک عنصر ریشه داشته باشد. ::: -When an element in a `` component is inserted or removed, this is what happens: +هنگامی که یک عنصر در کامپوننت `Transition>` درج یا حذف می‌شود، این اتفاق می‌افتد: -1. Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, a number of [CSS transition classes](#transition-classes) will be added / removed at appropriate timings. +1. Vue به طور خودکار تشخیص می دهد که آیا عنصر هدف دارای ترنزیشن CSS یا انیمیشن اعمال شده است. در این صورت، تعدادی از [کلاس‌های ترنزیشن CSS](#transition-classes) در زمان‌های مناسب اضافه/حذف خواهند شد. -2. If there are listeners for [JavaScript hooks](#javascript-hooks), these hooks will be called at appropriate timings. +2. اگر شنونده هایی برای [هوک های جاوا اسکریپت](#javascript-hooks) وجود داشته باشد، این هوک ها در زمان های مناسب فراخوانی می شوند. -3. If no CSS transitions / animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed on the browser's next animation frame. +3. اگر هیچ ترنزیشن / انیمیشن CSS شناسایی نشود و هیچ هوک جاوا اسکریپت ارائه نشود، عملیات DOM برای درج و/یا حذف در قاب انیمیشن بعدی مرورگر اجرا می‌شود. -## CSS-Based Transitions {#css-based-transitions} +## ترنزیشن های مبتنی بر CSS {#css-based-transitions} -### Transition Classes {#transition-classes} +### کلاس های ترنزیشن {#transition-classes} -There are six classes applied for enter / leave transitions. +شش کلاس برای ترنزیشن ورود / خروج اعمال می شود. ![Transition Diagram](./images/transition-classes.png) -1. `v-enter-from`: Starting state for enter. Added before the element is inserted, removed one frame after the element is inserted. +1. `v-enter-from`: حالت شروع برای ورود. قبل از وارد کردن عنصر، اضافه می‌شود، یک فریم پس از وارد کردن عنصر، حذف می‌شود. -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. +2. `v-enter-active`: حالت فعال برای ورود. در طول تمام فاز ورود اعمال می‌شود. قبل از وارد کردن عنصر اضافه می‌شود، وقتی که ترنزیشن/انیمیشن پایان می‌یابد حذف می‌شود. از این کلاس می‌توان برای تعریف مدت زمان، تاخیر و منحنی انعطاف‌پذیری برای ترنزیشن ورودی استفاده کرد. -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. +3. `v-enter-to`: حالت پایانی برای ورود. یک فریم پس از وارد شدن عنصر، اضافه می‌شود (همزمان با حذف `v-enter-from`)، وقتی که ترنزیشن/انیمیشن پایان می‌یابد، حذف می‌شود. -4. `v-leave-from`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame. +4. `v-leave-from`: حالت شروع برای خروج. فوراً پس از ایجاد ترنزیشن خروجی اضافه می‌شود، یک فریم پس از آن حذف می‌شود. -5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when a leaving 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`: حالت فعال برای خروج. در طول تمام فاز خروج اعمال می‌شود. فوراً پس از ایجاد ترنزیشن خروجی اضافه می‌شود، وقتی که ترنزیشن/انیمیشن پایان می‌یابد حذف می‌شود. از این کلاس می‌توان برای تعریف مدت زمان، تاخیر و منحنی انعطاف‌پذیری برای ترنزیشن خروجی استفاده کرد. -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. +6. `v-leave-to`: حالت پایانی برای خروج. یک فریم پس از ایجاد ترنزیشن خروجی اضافه می‌شود (همزمان با حذف `v-leave-from`)، وقتی که ترنزیشن/انیمیشن پایان می‌یابد حذف می‌شود. -`v-enter-active` and `v-leave-active` give us the ability to specify different easing curves for enter / leave transitions, which we'll see an example of in the following sections. +`v-enter-active` و `v-leave-active` به ما این امکان را می‌دهند که منحنی‌های انعطاف‌پذیر متفاوتی را برای ترنزیشن های ورودی/خروجی مشخص کنیم، که یک نمونه از آن را در بخش‌های آینده خواهیم دید. -### Named Transitions {#named-transitions} +### ترنزیشن های نام‌دار {#named-transitions} -A transition can be named via the `name` prop: +یک ترنزیشن می‌تواند از طریق پراپ `name` نام‌گذاری شود: ```vue-html @@ -108,7 +108,7 @@ A transition can be named via the `name` prop: ``` -For a named transition, its transition classes will be prefixed with its name instead of `v`. For example, the applied class for the above transition will be `fade-enter-active` instead of `v-enter-active`. The CSS for the fade transition should look like this: +برای یک ترنزیشن نام‌دار، کلاس‌های آن ترنزیشن با نام آن پیشوند داده می‌شود به جای `v`. به عنوان مثال، کلاس اعمال شده برای ترنزیشن فوق به جای `fade-enter-active`، `v-enter-active` خواهد بود. کد CSS برای ترنزیشن fade به این صورت می‌باشد: ```css .fade-enter-active, @@ -122,11 +122,11 @@ For a named transition, its transition classes will be prefixed with its name in } ``` -### CSS Transitions {#css-transitions} +### ترنزیشن های CSS {#css-transitions} -`` is most commonly used in combination with [native CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions), as seen in the basic example above. The `transition` CSS property is a shorthand that allows us to specify multiple aspects of a transition, including properties that should be animated, duration of the transition, and [easing curves](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). +`` بیشترین استفاده را همراه با [ترنزیشن های CSS اصلی](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) دارد، همانطور که در مثال ابتدایی دیده شد. ویژگی CSS `transition` یک مختصرنویسی است که به ما این امکان را می‌دهد که جزئیات متعددی از یک ترنزیشن را مشخص کنیم، از جمله خصوصیاتی که باید انیمه شوند، مدت زمان گذر و [منحنی‌های انعطاف‌پذیری](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). -Here is a more advanced example that transitions multiple properties, with different durations and easing curves for enter and leave: +در ادامه یک مثال پیشرفته‌تر آورده شده است که برای ترنزیشن های ورودی و خروجی، پراپرتی‌های متعددی را با مدت‌زمان و منحنی‌های انعطاف‌پذیر مختلف ترنزیشن می‌دهد: ```vue-html @@ -136,8 +136,7 @@ Here is a more advanced example that transitions multiple properties, with diffe ```css /* - Enter and leave animations can use different - durations and timing functions. + انیمیشن‌های ورودی و خروجی می‌توانند از مدت‌ها و توابع زمانی مختلف استفاده کنند. */ .slide-fade-enter-active { transition: all 0.3s ease-out; @@ -167,11 +166,11 @@ Here is a more advanced example that transitions multiple properties, with diffe -### CSS Animations {#css-animations} +### انیمیشن‌های CSS {#css-animations} -[Native CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) are applied in the same way as CSS transitions, with the difference being that `*-enter-from` is not removed immediately after the element is inserted, but on an `animationend` event. +[انیمیشن‌های CSS اصلی](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) به مشابه با ترنزیشن‌های CSS استفاده می‌شوند، با این تفاوت که `*-enter-from` فوراً پس از وارد شدن عنصر حذف نمی‌شود، بلکه در یک رویداد `animationend` انجام می‌شود. -For most CSS animations, we can simply declare them under the `*-enter-active` and `*-leave-active` classes. Here's an example: +برای اکثر انیمیشن‌های CSS، می‌توانیم آنها را به سادگی در داخل کلاس‌های `*-enter-active` و `*-leave-active` مشخص کنیم. یک مثال به شرح زیر است: ```vue-html @@ -214,9 +213,9 @@ For most CSS animations, we can simply declare them under the `*-enter-active` a -### Custom Transition Classes {#custom-transition-classes} +### کلاس‌های ترنزیشن سفارشی {#custom-transition-classes} -You can also specify custom transition classes by passing the following props to ``: +همچنین می‌توانید کلاس‌های ترنزیشن سفارشی را با ارسال پراپ‌های زیر به `` مشخص کنید: - `enter-from-class` - `enter-active-class` @@ -225,10 +224,10 @@ You can also specify custom transition classes by passing the following props to - `leave-active-class` - `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/): +این کلاس‌ها نام‌های معمولی کلاس را بازنویسی می‌کنند. این به خصوص مفید است زمانی که می‌خواهید سیستم گذر Vue را با یک کتابخانه انیمیشن CSS موجود مانند [Animate.css](https://daneden.github.io/animate.css/) ترکیب کنید: ```vue-html - + -### Using Transitions and Animations Together {#using-transitions-and-animations-together} +### استفاده از ترنزیشن‌ها و انیمیشن‌ها به صورت همزمان {#using-transitions-and-animations-together} -Vue needs to attach event listeners in order to know when a transition has ended. It can either be `transitionend` or `animationend`, depending on the type of CSS rules applied. If you are only using one or the other, Vue can automatically detect the correct type. +Vue برای اطلاع از اینکه یک ترنزیشن به پایان رسیده است، نیاز به اتصال گوش کننده‌های رویداد دارد. این ممکن است یا `transitionend` یا `animationend` باشد، بسته به نوع قوانین CSS اعمال شده. اگر فقط از یکی از آنها استفاده می‌کنید، Vue می‌تواند به صورت خودکار نوع صحیح را تشخیص دهد. -However, in some cases you may want to have both on the same element, for example having a CSS animation triggered by Vue, along with a CSS transition effect on hover. In these cases, you will have to explicitly declare the type you want Vue to care about by passing the `type` prop, with a value of either `animation` or `transition`: +هرچند در برخی موارد ممکن است بخواهید هر دوی آنها را بر روی یک عنصر داشته باشید؛ به عنوان مثال، یک انیمیشن CSS که توسط Vue فعال می‌شود، همراه با یک افکت گذری CSS هنگام هاور موس. در این موارد، شما باید به صراحت نوعی که می‌خواهید Vue اهمیت بدهد را با ارسال پراپ `type` با مقدار `animation` یا `transition` اعلام کنید: ```vue-html ... ``` -### Nested Transitions and Explicit Transition Durations {#nested-transitions-and-explicit-transition-durations} +### ترنزیشن‌های تو در تو و مدت‌زمان‌های صریح ترنزیشن{#nested-transitions-and-explicit-transition-durations} -Although the transition classes are only applied to the direct child element in ``, we can transition nested elements using nested CSS selectors: +هرچند که کلاس‌های ترنزیشن فقط بر روی عنصر فرزند مستقیم در `` اعمال می‌شوند، ما می‌توانیم عنصرهای تو در تو را با استفاده از انتخابگرهای CSS تو در تویی انتقال دهیم: ```vue-html @@ -274,7 +273,7 @@ Although the transition classes are only applied to the direct child element in ``` ```css -/* rules that target nested elements */ +/* قوانینی که به عنصرهای تو در تو اشاره می‌کنند */ .nested-enter-active .inner, .nested-leave-active .inner { transition: all 0.3s ease-in-out; @@ -286,21 +285,21 @@ Although the transition classes are only applied to the direct child element in opacity: 0; } -/* ... other necessary CSS omitted */ +/* ... سایر قسمت‌های ضروری از CSS حذف شده است */ ``` -We can even add a transition delay to the nested element on enter, which creates a staggered enter animation sequence: +می‌توانیم حتی یک تاخیر ترنزیشن را به عنصر تو در تو در حال ورود اضافه کنیم که یک دنباله انیمیشن ورود گام‌به‌گام ایجاد می‌کند: ```css{3} -/* delay enter of nested element for staggered effect */ +/* تاخیر ورود عنصر تو در تو برای ایجاد اثر گام‌به‌گام */ .nested-enter-active .inner { transition-delay: 0.25s; } ``` -However, this creates a small issue. By default, the `` component attempts to automatically figure out when the transition has finished by listening to the **first** `transitionend` or `animationend` event on the root transition element. With a nested transition, the desired behavior should be waiting until the transitions of all inner elements have finished. +با این حال، این یک مشکل کوچک ایجاد می‌کند. به صورت پیش‌فرض، کامپوننت `` سعی می‌کند به طور خودکار فهمیدن اینکه ترنزیشن به پایان رسیده یا خیر را با گوش دادن به **اولین** رویداد `transitionend` یا `animationend` بر روی عنصر ترنزیشن اصلی انجام دهد. با یک ترنزیشن تو در تو، رفتار مطلوب انتظار کشیدن تا زمانی که ترنزیشن‌های همه عنصرهای داخلی به پایان رسیده باشند می‌باشد. -In such cases you can specify an explicit transition duration (in milliseconds) using the `duration` prop on the `` component. The total duration should match the delay plus transition duration of the inner element: +در چنین مواردی، می‌توانید مدت‌زمان ترنزیشن را به صورت صریح (به میلی‌ثانیه) با استفاده از پراپ `duration` بر روی کامپوننت `` مشخص کنید. مدت‌زمان کل باید با جمع تاخیر و مدت‌زمان گذر عنصر داخلی همخوانی داشته باشد: ```vue-html ... @@ -310,25 +309,25 @@ In such cases you can specify an explicit transition duration (in milliseconds) [Try it in the Playground](https://play.vuejs.org/#eNqVVd9v0zAQ/leO8LAfrE3HNKSFbgKmSYMHQNAHkPLiOtfEm2NHttN2mvq/c7bTNi1jgFop9t13d9995ziPyfumGc5bTLJkbLkRjQOLrm2uciXqRhsHj2BwBiuYGV3DAUEPcpUrrpUlaKUXcOkBh860eJSrcRqzUDxtHNaNZA5pBzCets5pBe+4FPz+Mk+66Bf+mSdXE12WEsdphMWQiWHKCicoLCtaw/yKIs/PR3kCitVIG4XWYUEJfATFFGIO84GYdRUIyCWzlra6dWg2wA66dgqlts7c+d8tSqk34JTQ6xqb9TjdUiTDOO21TFvrHqRfDkPpExiGKvBITjdl/L40ulVFBi8R8a3P17CiEKrM4GzULIOlFmpQoSgrl8HpKFpX3kFZu2y0BNhJxznvwaJCA1TEYcC4E3MkKp1VIptjZ43E3KajDJiUMBqeWUBmcUBUqJGYOT2GAiV7gJAA9Iy4GyoBKLH2z+N0W3q/CMC2yCCkyajM63Mbc+9z9mfvZD+b071MM23qLC69+j8PvX5HQUDdMC6cL7BOTtQXCJwpas/qHhWIBdYtWGgtDWNttWTmThu701pf1W6+v1Hd8Xbz+k+VQxmv8i7Fv1HZn+g/iv2nRkjzbd6npf/Rkz49DifQ3dLZBBYOJzC4rqgCwsUbmLYlCAUVU4XsCd1NrCeRHcYXb1IJC/RX2hEYCwJTvHYVMZoavbBI09FmU+LiFSzIh0AIXy1mqZiFKaKCmVhiEVJ7GftHZTganUZ56EYLL3FykjhL195MlMM7qxXdmEGDPOG6boRE86UJVPMki+p4H01WLz4Fm78hSdBo5xXy+yfsd3bpbXny1SA1M8c82fgcMyW66L75/hmXtN44a120ktDPOL+h1bL1HCPsA42DaPdwge3HcO/TOCb2ZumQJtA15Yl65Crg84S+BdfPtL6lezY8C3GkZ7L6Bc1zNR0=) -If necessary, you can also specify separate values for enter and leave durations using an object: +اگر لازم باشد، می‌توانید مقادیر جداگانه برای مدت‌زمان ورود و خروج را با استفاده از یک آبجکت مشخص کنید: ```vue-html ... ``` -### Performance Considerations {#performance-considerations} +### در نظر گرفتن عملکرد {#performance-considerations} -You may notice that the animations shown above are mostly using properties like `transform` and `opacity`. These properties are efficient to animate because: +ممکن است توجه کنید که انیمیشن‌های نشان داده شده بیشتر از پراپ‌هایی مانند `transform` و `opacity` استفاده می‌کنند. این پراپ‌ها به دلیل کارآیی زیر به راحتی قابل انیمیشن‌سازی هستند: -1. They do not affect the document layout during the animation, so they do not trigger expensive CSS layout calculation on every animation frame. +1. آنها در طول انیمیشن ترتیب لایه‌های داکیومنت را تحت تأثیر قرار نمی‌دهند، بنابراین در هر فریم انیمیشن محاسبات سنگین ترتیب CSS را فراخوانی نمی‌کنند. -2. Most modern browsers can leverage GPU hardware acceleration when animating `transform`. +2. یشتر مرورگرهای مدرن می‌توانند از شتاب‌دهنده سخت‌افزاری GPU بهره مند شوند هنگامی که `transform` را انیمیشن می‌دهند. -In comparison, properties like `height` or `margin` will trigger CSS layout, so they are much more expensive to animate, and should be used with caution. We can check resources like [CSS-Triggers](https://csstriggers.com/) to see which properties will trigger layout if we animate them. +در مقابل، پراپ‌هایی مانند `height` یا `margin` ترتیب CSS را فراخوانی می‌کنند، بنابراین برای انیمیشن دادن به آنها بسیار سنگین هستند و باید با احتیاط استفاده شوند. می‌توانیم به منابعی مانند [CSS-Triggers](https://csstriggers.com/) مراجعه کنیم تا ببینیم کدام پراپ‌ها با انیمیشن آن‌ها ترتیب CSS را فراخوانی می‌کنند. -## JavaScript Hooks {#javascript-hooks} +## هوک های جاوا اسکریپت {#javascript-hooks} -You can hook into the transition process with JavaScript by listening to events on the `` component: +شما می‌توانید با گوش دادن به رویدادها بر روی کامپوننت `` به فرآیند ترنزیشن با جاوا اسکریپت متصل شوید: ```html ```js -// called before the element is inserted into the DOM. -// use this to set the "enter-from" state of the element +// قبل از اینکه عنصر در DOM درج شود فراخوانی می‌شود. +// از این استفاده کنید تا وضعیت 'enter-from' عنصر تنظیم شود. function onBeforeEnter(el) {} -// called one frame after the element is inserted. -// use this to start the entering animation. +// یک فریم پس از وارد شدن عنصر فراخوانی می‌شود. +// از این استفاده کنید تا انیمیشن ورودی شروع شود. function onEnter(el, done) { - // call the done callback to indicate transition end - // optional if used in combination with CSS + // برای نشان دادن پایان ترنزیشن تابع done را فراخوانی کنید. + // اگر با CSS استفاده شود، اختیاری است done() } -// called when the enter transition has finished. +// زمانی فراخوانی می‌شود که ترنزیشن ورودی به پایان رسیده باشد. function onAfterEnter(el) {} -// called when the enter transition is cancelled before completion. +// زمانی فراخوانی می‌شود که ترنزیشن ورودی قبل از کامل شدن لغو شود. function onEnterCancelled(el) {} -// called before the leave hook. -// Most of the time, you should just use the leave hook +// قبل از فراخوانی ترنزیشن خروجی فراخوانی می‌شود. +// بیشتر مواقع، بهتر است فقط از هوک خروجی استفاده کنید. function onBeforeLeave(el) {} -// called when the leave transition starts. -// use this to start the leaving animation. +// زمانی فراخوانی می‌شود که ترنزیشن خروجی شروع می‌شود. +// از این استفاده کنید تا انیمیشن خروجی شروع شود. function onLeave(el, done) { - // call the done callback to indicate transition end - // optional if used in combination with CSS + // برای نشان دادن پایان ترنزیشن تابع done را فراخوانی کنید. + // اگر با CSS استفاده شود، اختیاری است done() } -// called when the leave transition has finished and the -// element has been removed from the DOM. +// زمانی فراخوانی می‌شود که ترنزیشن خروجی به پایان رسیده و عنصر از DOM حذف شده باشد. function onAfterLeave(el) {} -// only available with v-show transitions +// تنها در ترنزیشن‌های v-show در دسترس است. function onLeaveCancelled(el) {} ``` @@ -393,39 +391,38 @@ function onLeaveCancelled(el) {} export default { // ... methods: { - // called before the element is inserted into the DOM. - // use this to set the "enter-from" state of the element + // قبل از اینکه عنصر در DOM درج شود فراخوانی می‌شود. + // از این استفاده کنید تا وضعیت 'enter-from' عنصر تنظیم شود. onBeforeEnter(el) {}, - // called one frame after the element is inserted. - // use this to start the animation. + // یک فریم پس از وارد شدن عنصر فراخوانی می‌شود. + // از این استفاده کنید تا انیمیشن شروع شود. onEnter(el, done) { - // call the done callback to indicate transition end - // optional if used in combination with CSS + // برای نشان دادن پایان ترنزیشن، تابع done را فراخوانی کنید. + // اگر با CSS استفاده شود، اختیاری است done() }, - // called when the enter transition has finished. + // زمانی فراخوانی می‌شود که ترنزیشن ورودی به پایان رسیده باشد. onAfterEnter(el) {}, onEnterCancelled(el) {}, - // called before the leave hook. - // Most of the time, you should just use the leave hook. + // قبل از فراخوانی ترنزیشن خروجی، فراخوانی می‌شود. + // بیشتر مواقع، بهتر است فقط از هوک خروجی استفاده کنید. onBeforeLeave(el) {}, - // called when the leave transition starts. - // use this to start the leaving animation. + // زمانی فراخوانی می‌شود که ترنزیشن خروجی شروع می‌شود. + // از این استفاده کنید تا انیمیشن خروجی شروع شود. onLeave(el, done) { - // call the done callback to indicate transition end - // optional if used in combination with CSS + // برای نشان دادن پایان ترنزیشن، تابع done را فراخوانی کنید. + // اگر با CSS استفاده شود، اختیاری است done() }, - // called when the leave transition has finished and the - // element has been removed from the DOM. + // زمانی فراخوانی می‌شود که ترنزیشن خروجی به پایان رسیده و عنصر از DOM حذف شده باشد. onAfterLeave(el) {}, - // only available with v-show transitions + // تنها در ترنزیشن‌های v-show در دسترس است. onLeaveCancelled(el) {} } } @@ -433,9 +430,9 @@ export default { -These hooks can be used in combination with CSS transitions / animations or on their own. +این هوک‌ها می‌توانند به ترکیب با ترنزیشن‌ها / انیمیشن‌های CSS یا به تنهایی استفاده شوند. -When using JavaScript-only transitions, it is usually a good idea to add the `:css="false"` prop. This explicitly tells Vue to skip auto CSS transition detection. Aside from being slightly more performant, this also prevents CSS rules from accidentally interfering with the transition: +در هنگام استفاده از ترنزیشن‌های تنها با استفاده از JavaScript، به طور معمول، ایده‌ی خوبی است که پراپ `:css="false"` را اضافه کنید. این به طور صریح به Vue می‌گوید که از شناسایی خودکار ترنزیشن CSS صرف نظر کند. به جز بهبود کارایی کمی، این همچنین از این جلوگیری می‌کند که قوانین CSS به طور اتفاقی با ترنزیشن تداخل داشته باشند: ```vue-html{3} ``` -With `:css="false"`, we are also fully responsible for controlling when the transition ends. In this case, the `done` callbacks are required for the `@enter` and `@leave` hooks. Otherwise, the hooks will be called synchronously and the transition will finish immediately. +با استفاده از `:css="false"`، ما همچنین به صورت کامل مسئول کنترل زمان پایان ترنزیشن هستیم. در این حالت، بازخوانی‌های `done` برای هوک‌های `@enter` و `@leave` لازم است. در غیر این صورت، هوک‌ها به صورت همزمان فراخوانی می‌شوند و ترنزیشن به سرعت به پایان می‌رسد. -Here's a demo using the [GreenSock library](https://greensock.com/) to perform the animations. You can, of course, use any other animation library you want, for example [Anime.js](https://animejs.com/) or [Motion One](https://motion.dev/). +در اینجا یک نمونه دمو با استفاده از کتابخانه [GreenSock](https://greensock.com/) برای انجام انیمیشن‌ها وجود دارد. البته، می‌توانید از هر کتابخانه دیگری که مایلید، مانند [Anime.js](https://animejs.com/) یا [Motion One](https://motion.dev/)، استفاده کنید. @@ -463,36 +460,35 @@ Here's a demo using the [GreenSock library](https://greensock.com/) to perform t -## Reusable Transitions {#reusable-transitions} +## ترنزیشن‌های قابل استفاده مجدد {#reusable-transitions} -Transitions can be reused through Vue's component system. To create a reusable transition, we can create a component that wraps the `` component and passes down the slot content: +ترنزیشن‌ها از طریق سیستم کامپوننت Vue قابل استفاده مجدد هستند. برای ایجاد یک ترنزیشن قابل استفاده مجدد، می‌توانیم یک کامپوننت ایجاد کنیم که `` را دربربگیرد و محتوای اسلات را به آن منتقل کند: ```vue{5} ``` -Now `MyTransition` can be imported and used just like the built-in version: +حالا `MyTransition` می‌تواند وارد شده و مانند نسخه‌ی از پیش ساخته شده استفاده شود: ```vue-html @@ -500,9 +496,9 @@ Now `MyTransition` can be imported and used just like the built-in version: ``` -## Transition on Appear {#transition-on-appear} +## ترنزیشن در هنگام ظاهر شدن {#transition-on-appear} -If you also want to apply a transition on the initial render of a node, you can add the `appear` prop: +اگر می‌خواهید همچنین یک ترنزیشن را در زمان اولیه نمایش یک عنصر اعمال کنید، می‌توانید پراپ `appear` را اضافه کنید: ```vue-html @@ -510,9 +506,9 @@ If you also want to apply a transition on the initial render of a node, you can ``` -## Transition Between Elements {#transition-between-elements} +## ترنزیشن بین عناصر {#transition-between-elements} -In addition to toggling an element with `v-if` / `v-show`, we can also transition between two elements using `v-if` / `v-else` / `v-else-if`, as long as we make sure that there is only one element being shown at any given moment: +علاوه بر تغییر وضعیت یک عنصر با `v-if` / `v-show`، ما همچنین می‌توانیم بین دو عنصر ترنزیشن دهیم با استفاده از `v-if` / `v-else` / `v-else-if`، تا زمانی که اطمینان حاصل شود که تنها یک عنصر در هر لحظه نمایش داده می‌شود: ```vue-html @@ -526,11 +522,11 @@ In addition to toggling an element with `v-if` / `v-show`, we can also transitio [Try it in the Playground](https://play.vuejs.org/#eNqdk8tu2zAQRX9loI0SoLLcFN2ostEi6BekmwLa0NTYJkKRBDkSYhj+9wxJO3ZegBGu+Lhz7syQ3Bd/nJtNIxZN0QbplSMISKNbdkYNznqCPXhcwwHW3g5QsrTsTGekNYGgt/KBBCEsouimDGLCvrztTFtnGGN4QTg4zbK4ojY4YSDQTuOiKwbhN8pUXm221MDd3D11xfJeK/kIZEHupEagrbfjZssxzAgNs5nALIC2VxNILUJg1IpMxWmRUAY9U6IZ2/3zwgRFyhowYoieQaseq9ElDaTRrkYiVkyVWrPiXNdiAcequuIkPo3fMub5Sg4l9oqSevmXZ22dwR8YoQ74kdsL4Go7ZTbR74HT/KJfJlxleGrG8l4YifqNYVuf251vqOYr4llbXz4C06b75+ns1a3BPsb0KrBy14Aymnerlbby8Vc8cTajG35uzFITpu0t5ufzHQdeH6LBsezEO0eJVbB6pBiVVLPTU6jQEPpKyMj8dnmgkQs+HmQcvVTIQK1hPrv7GQAFt9eO9Bk6fZ8Ub52Qiri8eUo+4dbWD02exh79v/nBP+H2PStnwz/jelJ1geKvk/peHJ4BoRZYow==) -## Transition Modes {#transition-modes} +## حالت‌های ترنزیشن {#transition-modes} -In the previous example, the entering and leaving elements are animated at the same time, and we had to make them `position: absolute` to avoid the layout issue when both elements are present in the DOM. +در مثال قبلی، عناصر ورودی و خروجی به یک زمان انیمیشن داده شدند، و ما مجبور بودیم آن‌ها را به `position: absolute` تنظیم کنیم تا از مشکل طراحی جلوگیری کنیم زمانی که هر دو عنصر در DOM حاضر باشند. -However, in some cases this isn't an option, or simply isn't the desired behavior. We may want the leaving element to be animated out first, and for the entering element to only be inserted **after** the leaving animation has finished. Orchestrating such animations manually would be very complicated - luckily, we can enable this behavior by passing `` a `mode` prop: +با این حال، در برخی موارد این یک گزینه نیست یا به عنوان رفتار مطلوب شناخته نمی‌شود. ممکن است بخواهیم تا زمانی که انیمیشن خروجی انجام شده است، عنصر ورودی فقط **پس از** پایان انیمیشن خروجی درج شود. مدیریت این انیمیشن‌ها به صورت دستی بسیار پیچیده خواهد بود. خوشبختانه، می‌توانیم این رفتار را با ارسال یک پراپ `mode` به `` فعال کنیم: ```vue-html @@ -538,15 +534,15 @@ However, in some cases this isn't an option, or simply isn't the desired behavio ``` -Here's the previous demo with `mode="out-in"`: +در ادامه نمونه قبلی با `mode="out-in"` آورده شده است: -`` also supports `mode="in-out"`, although it's much less frequently used. +`` همچنین از `mode="in-out"` پشتیبانی می‌کند، اگرچه استفاده از آن کمتر متداول است. -## Transition Between Components {#transition-between-components} +## ترنزیشن بین کامپوننت‌ها {#transition-between-components} -`` can also be used around [dynamic components](/guide/essentials/component-basics#dynamic-components): +`` همچنین می‌تواند برای [کامپوننت‌های پویا](/guide/essentials/component-basics#dynamic-components) استفاده شود: ```vue-html @@ -567,9 +563,9 @@ Here's the previous demo with `mode="out-in"`: -## Dynamic Transitions {#dynamic-transitions} +## ترنزیشن‌های پویا {#dynamic-transitions} -`` props like `name` can also be dynamic! It allows us to dynamically apply different transitions based on state change: +پراپ‌های `` مانند `name` نیز می‌توانند پویا باشند! این به ما این امکان را می‌دهد که بر اساس تغییر وضعیت، به طور پویا ترنزیشن‌های مختلف اعمال کنیم: ```vue-html @@ -577,12 +573,12 @@ Here's the previous demo with `mode="out-in"`: ``` -This can be useful when you've defined CSS transitions / animations using Vue's transition class conventions and want to switch between them. +این مفید است زمانی که ترنزیشن‌ها / انیمیشن‌های CSS را با استفاده از کنوانسیون کلاس ترنزیشن Vue تعریف کرده‌اید و می‌خواهید بین آن‌ها تغییر کنید. -You can also apply different behavior in JavaScript transition hooks based on the current state of your component. Finally, the ultimate way of creating dynamic transitions is through [reusable transition components](#reusable-transitions) that accept props to change the nature of the transition(s) to be used. It may sound cheesy, but the only limit really is your imagination. +همچنین می‌توانید بر اساس وضعیت فعلی کامپوننت خود، رفتار مختلف را در هوک‌های ترنزیشن JavaScript اعمال کنید. در نهایت، راه حقیقی ایجاد ترنزیشن‌های پویا از طریق [کامپوننت‌های انتقال قابل استفاده مجدد](#reusable-transitions) است که پراپ‌ها را برای تغییر خصوصیات ترنزیشن(ها) مورد استفاده، دریافت می‌کنند. ممکن است که به نظر بیاید تا حدی تقلیدی است، اما واقعاً تنها محدودیت، خلاقیت شماست. --- -**Related** +**مرتبط** -- [`` API reference](/api/built-in-components#transition) +- [مستندات API ``](/api/built-in-components#transition)