Přechod - Triky CSS

transitionVlastnost je zkrácený vlastnost používá k reprezentaci až čtyř přechodových-související vlastnosti latinkou:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Tyto vlastnosti přechodu umožňují elementům měnit hodnoty po stanovenou dobu, animovat změny vlastností, místo aby k nim došlo okamžitě. Zde je jednoduchý příklad, který mění barvu pozadí prvku na: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Tomuto divu bude trvat půl vteřiny, když se nad ním myš změní, z červené na zelenou. Zde je živá ukázka takového přechodu:

Podívejte se na ukázku přechodu pera od Louise Lazarise (@impressivewebs) na CodePen.

Můžete určit konkrétní vlastnost, jak jsme výše, nebo použít hodnotu „vše“ pro odkaz na vlastnosti přechodu.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

V tomto výše uvedeném příkladu dojde k přechodu pozadí i výplně kvůli hodnotě „all“ zadané pro transition-propertyčást zkratky.

Jednotlivé sady hodnot můžete oddělit čárkou, abyste mohli provádět různé přechody na různých vlastnostech:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Pořadí hodnot většinou nezáleží - pokud není zadáno zpoždění. Pokud zadáte zpoždění, musíte nejprve určit dobu trvání. První hodnota, kterou prohlížeč rozpozná jako platnou hodnotu času, bude vždy představovat dobu trvání. Jakákoli následná platná hodnota času bude analyzována jako zpoždění.

Některé vlastnosti nelze převést, protože se nejedná o animovatelné vlastnosti. Úplný seznam vlastností, které jsou animovatelné, najdete ve specifikaci.

Zadáním přechodu na samotném prvku definujete přechod, který má proběhnout v obou směrech. To znamená, že když se změní styly (např. Při zapnutí kurzoru), změní se jejich vlastnosti, a když se styly změní zpět (např. Při vypnutém přechodu), změní se. Například následující ukázkové přechody při přechodu myší, ale ne při přechodu myší:

Podívejte se na Pen zohgt od Louise Lazarise (@impressivewebs) na CodePen.

K tomu dochází, protože přechod byl přesunut do :hoverselektoru stavu a na selektoru není žádný odpovídající přechod, který cílí na prvek přímo bez :hoverstavu.

Pro kompatibilitu ve všech podporujících prohlížečích jsou vyžadovány předpony dodavatelů se standardní syntaxí deklarovanou jako poslední:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (první stabilní verze IE, která podporuje transition) nevyžaduje -ms-předponu.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome	Firefox	TJ	Okraj	Safari
4 *	5 *	10	12	5,1 *

Mobilní / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	2,1 *	6,0-6,1 *