Animowanie pseudo elementów

Pseudo elementy są jak uzyskanie dodatkowych elementów DOM za darmo. Pozwalają dodać do naszych stron dodatkową zawartość, dekorację i znacznie więcej bez dodawania dodatkowego HTML i następnie ją animować. W tym poradniku wykorzystamy pseudo element, aby dodać małą wizualną klasę do przycisku. /pl/

Pseudo elementy

Za pomocą CSS możemy określić pseudo element wykorzystując ::before or ::after. Pseudo element jest następnie wstawiany w element, między element i zawartość. Ponieważ to działa jako samodzielny element, może być stylizowany, pozycjonowany i znacznie więcej. Kod wygląda mniej więcej tak:

.pebble::before {
  ...
}
.pebble::after {
  ...
}

W tym punkcie nasz element .pebble ma dołączone dwa wirtualne elementy i możemy stylizować je dowolnie.

Uwaga do "::" versus ":"

Generalnie akceptowane jest wykorzystanie podwójnego dwukropka ::, aby oznaczyć pseudo elementy (w przeciwieństwie do pseudo klas takich jak :hover, :first-child). Jeśli chcesz dodać obsługę IE8, najlepiej użyć pojedynczego :. Wszystkie inne przeglądarki i nowsze wersje IE obsługują podwójne.

Nie zapomnij o "treści"

Podczas dodawania pseudo elementów należy zwrócić uwagę na określenie właściwości content zanim będą mogły być widoczne na stronie. Gdy pseudo element jest stworzony w stanie bez treści, możemy skłonić go pojawienia się używając pustego content:

.pebble::before {
  content: ""
  ... more styling goes here...
}

To powinno załatwić element widoczny na ekranie.

Przykład: Błyszczący przycisk

W tym przykładzie wykorzystamy pseudo element do stworzenia efektu połysku po najechaniu na przycisk. Tutaj mamy realny przykład (najedź lub stuknij, aby zobaczyć efekt).

Zacznijmy od HTML:

Ponieważ używamy pseudo elementów, nie potrzebujemy więcej HTML, aby kontynuować. Można dodać klasę do przycisku, jeśli stylizujesz więcej niż jeden typ na stronie, ale teraz wykorzystamy ogólny element, aby uprościć proces.

Dodawanie efektu połysku

Efekt połysku jest liniowym gradientem, który przechodzi przez przycisk. Aby go stworzyć, użyjemy pseudo elementu after i ustanowimy początkową pozycję poza przyciskiem:

button::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}

Efekt połysku składa się z gradientu od koloru przycisku do białego i z powrotem. W tym momencie jest umiejscowiony poza przyciskiem.

Musimy ukryć warstwę połysku tak, aby pojawiała się po najechaniu. Aby to zrobić, ustawimy właściwość overflow przycisku na hidden. Ponieważ pseudo element znajduje się w przycisku, jego pozycja poza przyciskiem nie będzie widoczna.

button {
  background: #e5ac8e;
  color: #fff;
  font-size: 14px;
  border-radius: 0.5em;
  padding: 0 1em;
  position: relative;
  overflow: hidden;
  line-height: 32px;
}

Wstawiłem również kilka inny stylów, aby dać przyciskowi indywidualny wygląd. Jedną rzeczą, na którą należy zwrócić uwagę jest użycie position: relative. Dodałem tę właściwość tak, aby bezwzględnie ustawiony pseudo element będzie istniał w przycisku. Bez określania pozycji, pozycja bezwzględnie ustawiona będzie umiejscowiony w elemencie nadrzędnym.

Dodawanie animacji

Ponieważ użyjemy animacji w tym przykładzie, wykonamy dwa dodatkowe kroki. Najpierw powiemy przeglądarce, aby rozpoczęła animację po najechaniu. Następnie ustawimy dokładnie co będziemy animować za pomocą keyframes.

Dodawanie stanu najechania może być wykonane przez ułożenie after na hover w taki sposób:

button:hover::after, button:focus::after {
  animation: sheen 1s forwards;
}

Tutaj mówimy przeglądarce, że po najechaniu pseudo element after ma mieć animation. Animacja o nazwie połysk trwa jedną sekundę i zatrzymuje się bez powtarzania.

Porządek ma tutaj znaczenie. Użycie ::after:hover nie zadziała, ponieważ będzie mówić przeglądarce, aby zareagować na stan najechania pseudo elementu.

Dodałem również stan skupienia. Oznacza to, że widzowie przewijający przez stronę również zobaczą efekt połysku bez potrzeby najechania. (Dziękuję Šime Vidas za wskazówkę)

Określmy keyframes dla tej animacji:

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

Potrzebujemy tylko jednej klatki kluczowej w tym przypadku. Ponieważ początkowa pozycja (0%) wynika z pozycji pseudo elementu, opiszemy tylko pozycję końcową. W tym przypadku końcowa pozycja po drugiej stronie w górnym prawym rogu przycisku. Przeglądarka będzie animować efekt połysku przez cały przycisk.

Rozważania na temat przeglądarek

Właściwość animacji jest dobrze obsługiwana tak jak pseudo elementy. Zawsze warto się upewnić i dołączyć prefiksy -webkit i -moz dla keyframes i dowolnych transformacji.