Jak ustawić wysokość przejścia w CSS

W aplikacjach internetowych konieczne jest wydajne przekazanie wiadomości. Programiści dostarczają swoich koncepcji swoim widzom w lepszy sposób, używając animacji. Aby skonfigurować różne właściwości animacji, takie jak stany i prędkość, używane są przejścia. W CSS przejścia pomagają w stosowaniu różnych efektów przez elementy HTML, takie jak czas trwania i opóźnienie.

Jak ustawić wysokość przejścia w CSS?

W CSS wysokość przejścia można ustawić przy użyciu następujących właściwości:

• Nieruchomość przejściowa
• Przekształć właściwość przejściową

Zacznijmy więc od metody!

Metoda 1: Ustaw wysokość przejścia za pomocą właściwości przejściowej CSS

A "przemiana”To ustawione ramki czasowe, określając stan początkowy i końcowy elementu. Jest to krótka właściwość wszystkich właściwości przejściowych Longhand, takich jak czas trwania przejściowego lub proporcjonalność.

Idźmy naprzód i weźmy przykład, aby zrozumieć, w jaki sposób można użyć właściwości przejściowej do ustawienia wysokości przejścia.

Przykład 1

W pliku HTML określ „„Między tagami.

Html

Najpierw określamy „kolor tła„Własność o wartości”Pomarańczowy". Następnie przypisz właściwości wysokości i szerokości wartościami „100px" I "50px". Teraz ustaw „przemiana„Nieruchomość z„Wysokość 1s" wartość; Wysokość 1s określa, że ​​element wykonuje przypisaną akcję w jednej sekundzie w kierunku pionowym.

W następnym kroku użyjemy selektora „:unosić się”Z elementem Div i ustaw właściwość wysokości jako„200px". To sprawi, że linia pionowa rozszerzy się z 100px do 200px, gdy unosimy nasz wskaźnik na element.

CSS

div
kolor tła: pomarańczowy;
Wysokość: 100px;
szerokość: 50px;
przejście: wysokość 1s;

Div: Hover
Wysokość: 200px;

Zapiszmy wspomniany kod i uruchom go w przeglądarce:

Jak widać na powyższym wyjściu, wysokość przejścia została pomyślnie ustawiona.

Metoda 2: Ustaw wysokość przejścia za pomocą właściwości transformacji CSS

Odmiany 2D lub 3D, które można wdrożyć na elementach HTML, wynikają z „przekształcać" nieruchomość. Możesz wykonywać różne działania wykorzystujące tę właściwość, takie jak skala, skoś, tłumaczyć i obracać. Jeśli nie wiesz o tych wymienionych operacjach, sprawdź ten dedykowany artykuł.

Przykład

Ustawimy wartość „przekształcać„Nieruchomość jako„Skala (1)”; Tutaj skala jest używana do dostosowywania elementu pionowego i przekazania „1„Ponieważ jego argument zwiększy wysokość. Ustawimy „Transform-origin„Własność o wartości”szczyt”, Co wskazuje, że transformacja zostanie zastosowana z górnego punktu. Teraz nadajemy właściwości przejściowej wartość „transformuj 1s, 1s”, Gdzie pierwsze 1s jest szerokości, a drugi jest na wysokości; Spowoduje to określenie jednej sekundy transformacji w wybranym elemencie.

Użyj selektora: Podnieś właściwość transformacji wartość „Skala (1.1)". W rezultacie, gdy wskaźnik zostanie umieszczony na elemencie, jego rozmiar wzrośnie odpowiednio.

CSS

div
kolor tła: pomarańczowy;
Wysokość: 100px;
szerokość: 50px;
Transform: Scaley (1);
Transform-Origin: TOP;
Przejście: Transform 1s, 1s;

Div: Hover
Wysokość: 200px;
Transform: Scaley (1.1);

Wyjście

Omówiliśmy sposób ustawienia wysokości przejścia w CSS.

Wniosek

Aby ustawić wysokość przejścia, „przemiana„Własność można wykorzystać. Wartość sekund jako argument wykonanie konkretnej akcji przez określony czas. Co więcej, CSS ”przekształcać”Można również zastosować właściwość wraz z przejściem, w którym musisz określić skalę transformacji i pochodzenie, aby osiągnąć pożądane wyniki. Ten przewodnik pokazuje wszystkie wydajne metody ustawiania wysokości przejścia w CSS.