Czy da się animować innerHTML?

pytanie zadane 1 lutego 2017 w JavaScript przez R.orlinski Mądrala (5,490 p.)

Drodzy forumowicze.

Mam pytanie, a mianowicie mam taką oto prostą linię kodu:

_("status").innerHTML = '<div class="sent-alert">Tekst, który ma się animować.</div>';

i chciałbym, aby pokazywanie tego diva się animowało. Czy jest możliwość zrobić coś takiego?

Pozdrawiam.

komentarz 1 lutego 2017 przez Magicone Nałogowiec (45,100 p.)

Akurat innerHTML to pole, które zmienione "dynamicznie tworzy" wnętrze elementu, nijak nie da się go animować, w przeciwieństwie do samego elementu.

2 odpowiedzi

odpowiedź 1 lutego 2017 przez mtk3d Nałogowiec (46,690 p.)

Możesz nadać mu przy tworzeniu visibility:hidden;, albo display: none; i wtedy zastosować animację.

komentarz 1 lutego 2017 przez R.orlinski Mądrala (5,490 p.)

A co oznacza "nadać przy tworzeniu"?

komentarz 1 lutego 2017 przez mtk3d Nałogowiec (46,690 p.)

_("status").innerHTML = '<div class="sent-alert" style="visibility: hidden;">Tekst, który ma się animować.</div>';

_("status").innerHTML = '<div class="sent-alert" style="display: none;">Tekst, który ma się animować.</div>';

A przy animacji najlepiej skorzystać z jQuery

odpowiedź 1 lutego 2017 przez Filip2248 Dyskutant (8,840 p.)

Możesz elementowi "status" dać w css opacity: 0; (przezroczystość równa zeru...) i transition: opacity 0.4s; (to sprawi, że zmiana przezroczystości będzie animowana...).

Teraz, gdy robisz innerHTML div'a "status" ustawiasz wartość opacity na 1, a gdy go opróżniasz na 0.

komentarz 1 lutego 2017 przez R.orlinski Mądrala (5,490 p.)

Nie potrafię tylko zrozumieć z tego linku w jaki sposób mógłbym zmienić właściwość div'a "status" po dodaniu napisu przez innerHTML. :/

komentarz 2 lutego 2017 przez Filip2248 Dyskutant (8,840 p.)

Tu masz przykład:

elt.style.color = "blue";

Gdzie: elt - element jakiemu chcesz zmienić style, style - określasz, że chcesz ten element właśnie stylować, color - jaki styl chcesz ustawić.

Potem w cudzysłowie piszesz wartość :)