Problem z animowaniem się zmieniającego się tekstu

Question

Hej! 

Najłatwiej będzie mi pokazać o co mi chodzi na przykładzie: https://hryszko.dev/dihqyYJZqNUv/

I love ... animuje się perfekcyjnie, jednak I code in ... już nie chociaż są na podstawie tego samego stylu animacji
 

@keyframes animate{

	0%{
		opacity: 0;
		transform: translateY(50%);
	}
	50%{
		transform: translateY(0);
	}
	100%{
		opacity: 1;
	}
}

.animate{
	animation: animate 1s ease-in-out;
}

Tzn. dla tego elementu wyżej jest tylko opacity a dla tego na niżej jest jeszcze translate .. 

Druga sprawa to JS, otóż ta część kodu jest na podstawie strony znajomego (za zgodą oczywiście) i nie do końca rozumiem 4 linie:
 

		$( '#codeLang').html(lang[langRandId]);

		$( '#codeLang').removeClass('animate');
	    void document.getElementById("codeLang").offsetWidth;
		$( '#codeLang').addClass('animate');

Ja to rozumiem jako stworzenie voida ktory odczytuje szerokość od #codeLang. Przy czym nie bardzo widze sens tego .. dodatkowo animacja przestaje dzialac przy wylaczeniu tej linii wiec ewidentnie jest ona potrzebna...

Dla ułatwienia pliki: JS | CSS | HTML 

 

Z góry dziękuje za pomoc :) 

Answer 1

Jeśli chodzi o problem z działaniem transform na elemencie #codeLang, to zdaje się, że transform nie działa na elementach inline (a taki jest <span>, który próbujesz transformować) - ustawienie mu display: inline-block powoduje, że transformacja (przesuwania w pionie) działa.

Co do pytania o operator void, to on powoduje, że użyte razem z nim wyrażenie zamiast zwrócić swoją wartość (w tym przypadku wartość property offsetWidth elementu) zwróci undefined. Nie mam pewności, dlaczego ten operator został tutaj użyty, ale kojarzę przypadki gdzie żeby wymusić przeliczenie property danego elementu w DOM trzeba odwołać się do jego property (jeśli przypomnę sobie szczegóły, to dopiszę je w komentarzu).

Comments

Doładnie jak @JSHolic, zauważył, zamian tego span-a:

<span class="color animate" id="codeLang" style="color: rgb(161, 74, 118);">pytnon</span>

na div-a

<div class="color animate" id="codeLang" style="color: rgb(161, 74, 118);">pytnon</div>

załatwia sprawę: in-action 

[ What purpose does void element.offsetWidth serve? ] [ void operator ]

 

---

Działa, dziękuje Wam serdecznie za pomoc!

---

Twoja animacja bez jQuery, i z Moim małym "liftingiem": 

[ Edit ]

span pozostawiony i dopisane:  (@JSHolic )

span.color {
  display: inline-block;
}

lub

span#codeLang {
  display: inline-block;
}

https://codepen.io/vbservice/pen/poyRdva

---

@VBService, nie ma potrzeby zamieniać span na div (span nawet bardziej tu pasuje, ponieważ wrapuje tekst w linii), wystarczy dodać property display na inline-block.