Wraz z wprowadzeniem CSS3 pojawia się wiele nowych funkcji, które są dostępne do tworzenia wspaniałych efektów; jedną z najbardziej użytecznych jest właściwość przejścia .
Właściwość przejścia jest ważnym nowym rozwinięciem w CSS. Można go użyć do utworzenia efektu zmiany dynamicznej na div lub klasie za pomocą prostej struktury:
transition: property duration timing-function delay;Przejście CSS3 to świetny sposób na dodanie niewielkiej animacji do witryn bez dużego obciążenia biblioteki JavaScript, takiej jak jQuery.
Zanim zaczniemy, możesz zobaczyć tutaj wersję demonstracyjną właściwość przejścia w działaniu .
Po pierwsze, aby właściwość przejścia działała, należy zdefiniować standardową właściwość, do której będzie on stosowany. Prawdopodobnie dwie najczęstsze właściwości, które zostaną zdefiniowane, to szerokość i wysokość. Aby napisać własność samodzielną po prostu użyj:
transition-property: define propertyNastępnie, po zdefiniowaniu właściwości, należy przypisać wartość początkową i końcową. W przypadku wartości takich jak szerokość lub wysokość właściwość musi być ustawiona z wartością początkową, a następnie wartością końcową z innym warunkiem.
Na przykład tutaj ustawiamy właściwość przejścia na szerokość, następnie wartość początkową szerokości, a następnie ustawiamy wartość końcową, gdy element jest najechany:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Po zdefiniowaniu właściwości do transformacji, wartości początkowej i końcowej, musimy zdefiniować czas trwania przejścia. Osiąga się to poprzez określenie długości w sekundach lub milisekundach, jak poniżej:
transition-duration: duration;Budując to na przykładzie, tworzony jest następujący kod:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Oznacza to, że element div głowicy rozszerzy się o 25 pikseli przez 5 sekund.
Kod jest wystarczający, aby stworzyć przyjemny efekt, ale możemy dalej wykorzystać właściwość przejścia CSS3 za pomocą funkcji czasu. Za pomocą tej właściwości można zmienić krzywą prędkości okresu przejścia. Właściwość przejścia jest domyślnie ustawiona na krzywą liniową. Można jednak zdefiniować łatwość, łatwość, łatwość, łatwość wchodzenia na zewnątrz, a nawet sześcienny, aby zmienić krzywą prędkości. Cubic-bezier pozwala na definiowanie własnych wartości za pomocą (n, n, n, n), gdzie n może wynosić od 0 do 1 (na przykład liniowy byłby (0,0,1,1)).
Dodanie tego kodu do naszego przykładu spowoduje:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Co więcej, podobnie jak w przypadku okresu przejściowego, użycie właściwości delay-delay definiuje pauzę przed rozpoczęciem efektu przejścia:
transition-delay: time;Na koniec ważne jest rozważenie dwóch rzeczy podczas korzystania z właściwości przejścia CSS3. Po pierwsze, większość przeglądarek w obiegu wymaga obecnie prefiksu przeglądarki (wyjątkiem są IE10, Opera i Firefox16 +):
-moz-transition: dla przeglądarki Firefox 15
-webkit-transition: w przeglądarce Chrome i Safari
(Pamiętaj, że IE9 i niższe nie obsługują w ogóle właściwości przejścia).
Po drugie, chociaż używam długiej ręki w powyższych przykładach dla jasności, za najlepszą praktykę uważa się pisanie w skróconej formie, jak następuje:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Czy używasz właściwości przejścia CSS3? W jaki sposób porównuje się z animacjami opartymi na jQuery? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz ruchu przez Shutterstock.