You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`<Transition>` je vestavěná komponenta, což znamená, že je k dispozici v jakékoli šabloně komponenty, aniž by bylo nutné ji registrovat. Lze ji použít k aplikaci vstupních avýstupních animací na elementy nebo komponenty, které jsou jí předány prostřednictvím výchozího slotu. Vstup nebo výstup může být spuštěn jednou znásledujících akcí:
23
+
`<Transition>` je vestavěná komponenta, což znamená, že je k dispozici v jakékoli šabloně komponenty, aniž by bylo nutné ji registrovat. Lze ji použít k aplikaci vstupních a výstupních animací na elementy nebo komponenty, které jsou jí předány prostřednictvím výchozího slotu. Vstup nebo výstup může být spuštěn jednou z následujících akcí:
24
24
25
25
- Podmíněné vykreslování přes `v-if`
26
26
- Podmíněné zobrazení přes `v-show`
@@ -68,9 +68,9 @@ Zde je příklad nejzákladnějšího použití:
68
68
69
69
Když je element v komponentě `<Transition>` vložen nebo odebrán, stane se toto:
70
70
71
-
1. Vue automaticky zjistí, zda cílový má prvek aplikovány CSS přechody nebo animace. Pokud ano, budou v odpovídajících časech přidány / odebrány některé [CSS třídy přechodu](#transition-classes).
71
+
1. Vue automaticky zjistí, zda má cílový prvek aplikovány CSS přechody nebo animace. Pokud ano, budou v odpovídajících časech přidány / odebrány některé [CSS třídy přechodu](#transition-classes).
72
72
73
-
2. Pokud existují listenery pro [JS události](#javascript-hooks), budou jejich metody v odpovídajících časech provolány.
73
+
2. Pokud existují listenery pro [JavaScript události](#javascript-hooks), budou jejich metody v odpovídajících časech provolány.
74
74
75
75
3. Pokud nejsou detekovány žádné CSS přechody / animace a nejsou nastaveny žádné JavaScriptové události, operace DOM pro vložení a/nebo odebrání elementů budou provedeny v následujícím animačním snímku prohlížeče.
76
76
@@ -84,17 +84,17 @@ Existuje šest tříd aplikovaných pro přechody vstupu / výstupu.
1.`v-enter-from`: Počáteční stav pro vstup. Je přidána před vložením prvku, odebráno jeden snímek po vložení prvku.
87
+
1.`v-enter-from`: Počáteční stav pro vstup. Je přidána před vložením prvku, odebrána jeden snímek po vložení prvku.
88
88
89
89
2.`v-enter-active`: Aktivní stav pro vstup. Používá se během celé fáze vstupu. Je přidána před vložením prvku a odstraněna po dokončení přechodu/animace. Třída může být použita k definici trvání (duration), zpoždění (delay) a křivky pro zjemnění (easing) pro vstupní přechod.
90
90
91
-
3.`v-enter-to`: Koncový stav pro vstup. Je přidána jeden snímek po vložení prvku (vestejný okamžik, kdy je odstraněno `v-enter-from`) a odstraněna po dokončení přechodu/animace.
91
+
3.`v-enter-to`: Koncový stav pro vstup. Je přidána jeden snímek po vložení prvku (ve stejný okamžik, kdy je odstraněno `v-enter-from`) a odstraněna po dokončení přechodu/animace.
92
92
93
93
4.`v-leave-from`: Počáteční stav pro odchod. Je přidána okamžitě po spuštění odchodového přechodu a odstraněna po jednom snímání.
94
94
95
95
5.`v-leave-active`: Aktivní stav pro odchod. Používá se během celé fáze odchodu. Je přidána okamžitě po spuštění odchodového přechodu a odstraněna po dokončení přechodu/animace. Tato třída může být použita k definování trvání, zpoždění a křivky pro odchodový přechod.
96
96
97
-
6.`v-leave-to`: Koncový stav pro odchod. Je přidána jeden snímek po spuštění odchodového přechodu (ve stejný okamžik, kdy je odstraněno `v-leave-from`) aodstraněna po dokončení přechodu/animace.
97
+
6.`v-leave-to`: Koncový stav pro odchod. Je přidána jeden snímek po spuštění odchodového přechodu (ve stejný okamžik, kdy je odstraněno `v-leave-from`) a odstraněna po dokončení přechodu/animace.
98
98
99
99
`v-enter-active` a `v-leave-active` nám pro vstupní / odchodové přechody umožňují specifikovat různé křivky uvolnění, jak uvidíme na příkladu v následujících sekcích.
100
100
@@ -124,7 +124,7 @@ Pro pojmenovaný přechod budou jeho přechodové třídy uvozeny místo předpo
124
124
125
125
### CSS přechody {#css-transitions}
126
126
127
-
`<Transition>` se nejčastěji používá v kombinaci s [nativními CSS přechody](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions), jako vjednoduchém příkladu výše. CSS vlastnost `transition` je zkratka, která nám umožňuje specifikovat více různých aspektů přechodu, včetně vlastností, které by měly být animovány, trvání přechodu a [křivky pro zjemnění](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function).
127
+
`<Transition>` se nejčastěji používá v kombinaci s [nativními CSS přechody](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions), jako v jednoduchém příkladu výše. CSS vlastnost `transition` je zkratka, která nám umožňuje specifikovat více různých aspektů přechodu, včetně vlastností, které by měly být animovány, trvání přechodu a [easing funkce](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function).
128
128
129
129
Zde je více pokročilý příklad, který přechází mezi více vlastnostmi s různou dobou trvání a křivkami pro vstup a výstup:
130
130
@@ -176,7 +176,7 @@ Většinu CSS animací stačí deklarovat pod třídami `*-enter-active` a `*-le
176
176
```vue-html
177
177
<Transition name="bounce">
178
178
<p v-if="show" style="text-align: center;">
179
-
Ahoj, já jsem skákací text!
179
+
Ahoj, já jsem poskakující text!
180
180
</p>
181
181
</Transition>
182
182
```
@@ -253,15 +253,15 @@ Tyto třídy budou použity místo tříd s výchozími názvy. Obzvlášť uži
253
253
254
254
Vue potřebuje připojit event listenery, aby vědělo, kdy přechod skončil. V závislosti na typu použitých CSS pravidel to může být buď `transitionend` nebo `animationend`. Pokud používáte pouze jeden z nich, Vue automaticky detekuje správný typ.
255
255
256
-
Nicméně někdy můžete chtít mít na stejném elementu oba, například mít CSS animaci spouštěnou Vue spolu s efektem CSS přechodu při najetí myší. V těchto případech musíte explicitně deklarovat typ, o který se Vue stará, předáním vlastnosti `type` shodnotou buď `animation` nebo `transition`:
256
+
Nicméně někdy můžete chtít mít na stejném elementu oba, například mít CSS animaci spouštěnou Vue spolu s efektem CSS přechodu při najetí myší. V těchto případech musíte explicitně deklarovat typ, o který se Vue stará, předáním vlastnosti `type` s hodnotou buď `animation` nebo `transition`:
257
257
258
258
```vue-html
259
259
<Transition type="animation">...</Transition>
260
260
```
261
261
262
262
### Vnořené přechody a explicitní délky přechodů {#nested-transitions-and-explicit-transition-durations}
263
263
264
-
I přestože jsou přechodové třídy použity pouze na přímém potomkovi uvnitř `<Transition>`, můžeme přecházet na vnořené elementy pomocí vnořených CSS selektorů:
264
+
Přestože jsou přechodové třídy použity pouze na přímém potomkovi uvnitř `<Transition>`, můžeme přecházet na vnořené elementy pomocí vnořených CSS selektorů:
265
265
266
266
```vue-html
267
267
<Transition name="nested">
@@ -298,9 +298,9 @@ Můžeme dokonce přidat zpoždění přechodu na vnořený prvek při vstupu, c
298
298
}
299
299
```
300
300
301
-
Toto však vytváří malý problém. Výchozím chováním komponenty `<Transition>` je automaticky zjistit, kdy přechod skončil, posloucháním **prvního** události `transitionend` nebo `animationend` na root elementu přechodu. S vnořeným přechodem by však požadovaným chováním mělo být čekání, dokud neskončí i přechody všech vnitřních prvků.
301
+
To však vytváří malý problém. Výchozím chováním komponenty `<Transition>` je automaticky zjistit, kdy přechod skončil, posloucháním **první** události `transitionend` nebo `animationend` na root elementu přechodu. S vnořeným přechodem by však požadovaným chováním mělo být čekání, dokud neskončí i přechody všech vnitřních prvků.
302
302
303
-
V takových případech můžete specifikovat explicitní dobu přechodu (v milisekundách) pomocí vlastnosti `duration` na komponentě `<transition>`. Celková doba by měla odpovídat zpoždění plus době přechodu vnitřního prvku:
303
+
V takových případech můžete specifikovat explicitní dobu přechodu (v milisekundách) pomocí vlastnosti `duration` na komponentě `<Transition>`. Celková doba by měla odpovídat zpoždění plus době přechodu vnitřního prvku:
304
304
305
305
```vue-html
306
306
<Transition :duration="550">...</Transition>
@@ -309,7 +309,6 @@ V takových případech můžete specifikovat explicitní dobu přechodu (v mili
309
309
<NestedTransitions />
310
310
311
311
[Vyzkoušejte si to](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=)
312
-
```
313
312
314
313
Pokud je to nutné, můžete specifikovat i samostatné hodnoty pro dobu trvání při vstupu a odchodu pomocí objektu:
315
314
@@ -325,7 +324,7 @@ Můžete si všimnout, že animace zobrazené výše využívají převážně v
325
324
326
325
2. Většina moderních prohlížečů může využít hardwarovou akceleraci GPU během `transform` animace.
327
326
328
-
Naopak vlastnosti jako `height` nebo `margin` vyvolají změnu CSS layoutu, takže jsou na animaci mnohem dražší a měly by být používány opatrně. Abychom zjistili, které všechny CSS vlastnosti vyvolají při animaci změnu layoutu, můžeme zkontrolovat zdroje jako [CSS-Triggers](https://csstriggers.com/).
327
+
Naopak vlastnosti jako `height` nebo `margin` vyvolají změnu CSS layoutu, takže jsou na animaci mnohem dražší a měly by se používat opatrně. Pro zjištění, které všechny CSS vlastnosti změnu layoutu při animaci vyvolají, můžeme použít zdroje jako [CSSTriggers](https://csstriggers.com/).
329
328
330
329
## JavaScript události {#javascript-hooks}
331
330
@@ -570,15 +569,15 @@ Zde je předchozí demo s `mode="out-in"`:
570
569
571
570
## Dynamické přechody {#dynamic-transitions}
572
571
573
-
Vlastnosti (props) `<Transition>` jako `name` mohou být také dynamické! To nám umožňuje používat různé přechody operativně na základě změny stavu:
572
+
Vlastnosti `<Transition>` jako `name` mohou být také dynamické! To nám umožňuje používat různé přechody operativně na základě změny stavu:
574
573
575
574
```vue-html
576
575
<Transition :name="transitionName">
577
576
<!-- ... -->
578
577
</Transition>
579
578
```
580
579
581
-
To může být užitečné, pokud jste definovali přechody / animace pomocí konvenčních tříd Vue přechodů a chcete mezi nimi přepínat.
580
+
Může to být užitečné, pokud jste definovali přechody / animace pomocí konvenčních tříd Vue přechodů a chcete mezi nimi přepínat.
582
581
583
582
Můžete také aplikovat různé chování v JavaScriptových metodách pro přechod na základě aktuálního stavu vaší komponenty. V neposlední řadě, nejlepší způsob vytváření dynamických přechodů je pomocí [znovupoužitelných přechodů](#reusable-transitions), komponent, které přijímají vlastnosti (props) pro změnu povahy použitých přechodů. Možná to zní trochu kýčovitě, ale opravdu jediným omezením je vaše představivost.
0 commit comments