CSS Transitions: opis, właściwości i funkcje użytkowania

Stworzenie dobrej witryny internetowej jest dziś proste: jest wystarczająca liczba specjalistów, procesy poprawy funkcjonalności i jej prezentacji (struktura i treść) aktywnie się rozwijają. Ta ostatnia to konstrukcja środków CSS - jako najprostsze, efektywne kosztowo i wydajne rozwiązanie.

Walka deweloperów z klientami i właścicielami witryn o zainteresowanie odwiedzających i frekwencja zasobów przeniosła się w sferę cienkiej reklamy i miękkich (ciepłych i dynamicznych) treści.

Skok CSS Place

в псевдокласе :hover и обратно. Zgodnie z aktualną opinią, miejsce CSS Transitions w pseudo-klasie: hover and back. Istnieje styl znacznika, na przykład TagStyle, i istnieje styl TagStyle: hover. Zadaniem pseudoklasy jest umieszczenie zawartości wszystkich reguł drugiego opisu na pierwszym, gdy tylko mysz znajdzie się nad tagiem, a gdy tylko się opuści, zwróć wszystko z powrotem.

W takim schemacie (w wersji klasycznej) zazwyczaj zmieniały się kolory tła, kolory tekstu, ramka, zakrzywienia, wcięcia i inne widoczne elementy. позволяет это сделать плавно и управлять плавностью. Korzystanie z reguły CSS Transitions pozwala to zrobić płynnie i kontrolować płynność.

Reguła może zmieniać wiele innych elementów, ale zwykle są używane wskazane. CSS, можно найти на официальных ресурсах в интернете. Kompletną listę reguł, na które wpływa właściwość Transition CSS, można znaleźć w oficjalnych zasobach w Internecie.

Treść reguły przejścia

s включает в себя (transition='*'): Zadanie reguły: wykonaj płynne przejście innych reguł z jednego stanu do drugiego, dlatego przejście CSS obejmuje (przejście = "*"):

• nazwa właściwości, na którą ma wpływ (* -property);
• czas trwania procesu (* -duracja);
• funkcja przejścia (* -przeznaczanie-funkcja);
• opóźnienie rozpocznij proces (* -delay).

Pozwolono napisać krótką regułę na kanonach CSS:

• 1 s ease .5 s ; przejście: wszystkie 1 s łatwość .5 s ;

Przejście dotyczy wszystkich reguł, wykonywanych w ciągu jednej sekundy w stylu "łatwości" z półsekundowym opóźnieniem. Wszystko to samo, napisane przez elementy reguły:

• * -pertytowość: wszystko;
• * -duration: 1s;
• * -przeznaczanie funkcji: łatwość;
• * -delay: .5s;

поддерживается основными браузерами, но никогда не помешает убедиться в этом и в наличии кроссбраузерности записанных правил. Reguła przejścia jest obsługiwana przez główne przeglądarki, ale nigdy nie rani, aby upewnić się, że ta zgodność z zapisanymi regułami jest zgodna z wieloma przeglądarkami.

Klasyczna aplikacja

: background: Najprostszym i najczęściej używanym jest przejście koloru tła (symbolu): CSS Transition : background:

W tym przykładzie tylko reguła przejścia zostanie zastosowana do reguły koloru tła (czas trwania 2 sekundy, funkcja wyciszania, opóźnienie 0.2 sekundy), a pozostałe reguły natychmiast trafią do innego stanu.

Funkcja przejścia (styl)

- функция перехода, то есть кривая времени, как выполнять переход из одного состояния в другое. Ważną częścią reguły CSS Transitions jest funkcja przejścia, czyli krzywa czasowa, jak dokonać przejścia z jednego stanu do drugiego. Opcja gładka (łatwa) jest domyślna: przejście rozpoczyna się powoli, przyspiesza i zwalnia na końcu.

Wartość "liniowa" określa jednolite przejście: "wprowadzanie" - rozpoczyna przejście powoli, następnie stopniowo przyspiesza do końca, a "łagodzenie" - działa odwrotnie.

Funkcja cubic-bezier (x1, y1, x2, y2) umożliwia utworzenie własnej opcji przejścia, ale korzystanie z oficjalnych zasobów i witryn z dobrym doświadczeniem przy użyciu krzywej Beziera jest nadal preferowane. Coś nowego, z czym można wyjść, na pewno nie zadziała, ale doświadczenie przyjemności dla oka i psychologii zwiedzającego opcji zostało nagromadzone, jednak znaczne.

Mieszanka konwersji z konwersją

& Transform. Połączenie reguł przejścia i transformacji CSS daje dobry efekt. Pierwszy określa czas trwania procesu, drugi pokazuje, co należy zrobić przez cały ten czas.

Transformacje umożliwiają przenoszenie znaczników, obracanie, zmianę rozmiaru, zmianę pozycji. Zastanów się nad kombinacją:

• ( 180 deg ); przekształć: obróć ( 180 stopni );
  • 2 s ease-out .2 s ; przejście: wszystkie 2 s wycięcie .2 s ;

Przez dwie sekundy zmieni zawartość etykiety o 180 stopni. Eksperymentując z funkcjami tłumaczenia, skalowania, obracania, pochylania i ich odmian, możesz osiągnąć ciekawe efekty i nadać swojej pracy wyjątkowej oryginalności.

позволяет вращать тексты и фигуры, как это необходимо для достижения поставленной цели. CSS3 pozwala również na przekształcenie 3d, czyli przesunięcie znacznika w współrzędnych xyz, co w połączeniu z CSS Transitions pozwala na obracanie tekstów i kształtów zgodnie z potrzebami, aby osiągnąć cel.

Zgodny z regułą przejścia

для background, border, color и других очевидно визуальных правил нормально, естественно и удобно, то для некоторых случаев, например, попытки совместить CSS Transition & Display, можно просто потратить время и не достичь желаемого. Jeśli używasz CSS Transitions dla tła, obramowania, kolorów i innych wizualnie reguł jest normalne, naturalne i wygodne, to w niektórych przypadkach, na przykład, próbując połączyć CSS Transition & Display, możesz po prostu spędzić czas, a nie osiągnąć tego, co chcesz.

Mówiąc ogólnie, przy planowaniu użycia efektów wizualnych zaleca się odróżnienie "widocznego z układu". Aby utworzyć piękny obrót kształtu lub tekstu na określony czas - działanie, które ma niewiele wspólnego z wyświetlaniem, widocznością, właściwością z-index. , то первое не упоминается, хотя его использование привносит в тег что-то заметное, но слабо управляемое. Jednakże, jeśli te dwa ostatnie są jasno określone na liście reguł, z którymi powiązane jest przejście CSS, nie wspomniano o pierwszym, chociaż jego użycie wprowadza do tagu coś zauważalnego, ale słabo kontrolowanego.

Reguła przejścia to nie tylko: hover i vice versa, ale można ją z powodzeniem zastosować do innych pseudoklas, na przykład: focus lub: active.

Ogólnie rzecz biorąc, Transition i Transform są funkcjami CSS, które logicznie nie są bezpośrednio z nią związane (chodzi tylko o style, a nie algorytmy). Ale w ciągu ostatnich kilku lat akcenty zmieniły się tak bardzo, że nie skorzystać z bogatego arsenału CSS i CSS3 to po prostu luksusowy luksus.

O nienormalnym i naturalnym

Na początku komputerów osobistych, kiedy do obliczeń matematycznych został wyprodukowany matematyczny procesor, nie było normalne, aby mieć 386 komputer bez koprocesora matematycznego, jeśli chodziło o efektywne wykorzystanie programu Fortran do obliczenia drogi do księżyca. Naturalnie, dzisiaj nikomu nie przychodzi kupowanie komputera, aby zapytać, czy ma on sprzętowo zaimplementowane metody obliczeń matematycznych.

Bez wątpienia algorytm obliczania czasu przejścia z jednego stylu do drugiego lub obrót znacznika wokół innego znacznika ma bardzo mały związek z koncepcjami dotyczącymi stylów. Znacznik nie jest elektronem obracającym się w pobliżu atomu.

I CSS - z definicji, tablica kaskadowych stylów i momentów dziedziczenia, biorąc pod uwagę urządzenia mobilne, z priorytetami, kombinacjami.

Ale świat zmienia się tak szybko. Dziś nie można nazwać innej formuły matematyką, ponieważ pojęcie liczby w nowoczesnym języku programowania niewiele różni się od pojęcia ciągu.

Ale jeśli pasuje do wszystkich, jeśli jest to wygodne i skuteczne, to może warto zmienić własne pomysły. & Transform сделают такую маленькую революцию: не нужно программировать то, что уже давно не нуждается в этом. Najwyraźniej to właśnie CSS Transition & Transform dokona tak małej rewolucji: nie ma potrzeby programowania czegoś, co już jej nie potrzebuje. Programiści przez długi czas cierpią na chorobę zawodu, która różni się w następujący sposób: przepisać nie tylko to, co inni zrobili przed sobą, aby wykonać następne zadanie, ale nawet to, co oni sami zrobili wczoraj. Co zrobić, świat i technologie są zmienne, a nawet małe metamorfozy w obszarze aplikacji czasami prowadzą do potrzeby znaczących zmian kodu.

Niemniej jednak takie przekształcenie algorytmów matematycznych w piękne i wygodne reguły CSS jest bardzo praktyczne i skuteczne.