Problem z animacją

Question

Kod:

function switchPage(x)
{	
	var j =  (-1);
	for(var i = 10, i>j,i--) {document.getElementById("content").opacity = i/100 ;}
	document.getElementById("content").innerHTML = pg[x];
	for(var i = 0, i<j,i++) {document.getElementById("content").opacity = i/100 ;}
	
} 

Czemu to nie działa ? Miało mi przełązać zawartoś diva z takim wejściem i wyjśiem. bez tych pętli działa..

Answer 1

Weź to zrób na transition w CSS + zmiana klasy w JS i tyle. Nie ma po co tak kombinować.

Comments

Jak ? Początkujący jestem.

---

http://jsfiddle.net/Comandeer/dp8zo31w/

---

Ale co to robi ? Dodaje do diva klasę i co dalej ?

---

Dodaje klasę do diva, odpala się transition z css i kiedy się kończy klasa jest usuwana

---

dokładniej. Czyli gdzie jest wejście a gdzie wyjście tego. Zresztą i tak nie działa.

---

Patrz - a mi działa…

Wejściem jest elem.classList.add a wyjściem obsługa zdarzenia transitionend, gdzie jest wywołane elem.classList.remove

Answer 2

function switchPage(x)
{	var div = documnet.getElementById("content");
	div.classList.add('fadeOut');

	div.addEventListener('transitionend', function fadeIn()
	{	document.getElementById("content").innerHTML = pg[x];
		div.classList.remove('fadeOut');

		div.removeEventListener('transitionend', fadeIn, false);
	}, false);
	
} 

Czemu nie działa. Onclick jet dodoany do diva w HTML.

Comments

Czyli opacity:0 to transision ?! No no dodana klasa ma tylko opacity.

---

Nie, transition to przejście od opacity: 1 (domyślnej wartości) do opacity: 0. My jedynie ustalamy czas trwania takiej animacji.

---

Wiem, ale ona następuje kiedy zmieniamy opacity tak ?

---

Tak, następuje wówczas, gdy zmienia się wartość własności, którą chcemy animować

---

A, to trzeba było tak od razu :)