CSS3 transition + JavaScript

2012-04-23 02:29

Medlem

Registrerad: Okt 2002

●

CSS3 transition + JavaScript

Försöker att gömma/visa element genom att ändra dess klass med JavaScript.
Allt fungerar som tänkt förutom att transfom:rotate endast körs första gången klassen läggs till på elementet.
Någon som har en aning om varför?

CSS:

.spinOut {
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	opacity: 0;
	width: 0px;
	height: 0px;
}

.spinIn {
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	opacity: 1;
	width: 150px;
	height: 150px;
}

JS:

FilterObj.prototype.add = function(){
	var that = this;
	setTimeout(function(){
		that.objects.removeClass('spinOut');
		that.objects.addClass('spinIn');
	}, 300);
	this.visible = true;
}
	
FilterObj.prototype.remove = function(){
	this.objects.removeClass('spinIn');
	this.objects.addClass('spinOut');
	this.visible = false;	
}

Rapportera Redigera

Citera flera Citera

2012-04-23 16:42

Permalänk

Leedow

Medlem ★

Plats: Falun
Registrerad: Dec 2003

●

Jag vet inte exakt vad du vill göra men en rotate på 360 grader borde inte göra någonting förutom om det är en "animation". En statisk förändring av vinkeln med 360 grader gör ingenting rent visuellt.
Om du vill göra en riktig "spin" så är det väl just "animation" du är ute efter?

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Rapportera Redigera

Citera flera Citera

2012-04-23 18:15

Permalänk

Yxskaftet

Medlem

Registrerad: Okt 2002

●

Skrivet av Leedow:

Jag vet inte exakt vad du vill göra men en rotate på 360 grader borde inte göra någonting förutom om det är en "animation". En statisk förändring av vinkeln med 360 grader gör ingenting rent visuellt.
Om du vill göra en riktig "spin" så är det väl just "animation" du är ute efter?

Gå till inlägget

Som topic säger så har jag med en transition (t.ex. -webkit-transition: all 0.3s ease-in-out;) på elementet, vilket gör att det blir en animation.
Problemet är som sagt att själv "snurr" animationen endast fungerar första gången klassen läggs till. Om jag lägger till klassen, tar bort den och sedan lägger till den igen så blir det ingen animation.

Rapportera Redigera

Citera flera Citera

2012-04-23 21:16

Permalänk

agentq15

Medlem

Plats: Göteborg
Registrerad: Nov 2009

●

.spinOut {
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);

Är det inte så att det ska va typ -360deg eller 0deg. Du vill ju annars ändra till något som den redan är.
Eller är jag helt ute och snurrar(:P)?

Rapportera Redigera

Citera flera Citera

2012-04-23 21:43

Permalänk

Yxskaftet

Medlem

Registrerad: Okt 2002

●

Skrivet av agentq15:

.spinOut {
	-moz-transform:rotate(360deg);
	-webkit-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);

Är det inte så att det ska va typ -360deg eller 0deg. Du vill ju annars ändra till något som den redan är.
Eller är jag helt ute och snurrar(:P)?

Gå till inlägget

Haha, så enkelt var det ja.
Tusen tack!

Rapportera Redigera

Citera flera Citera

CSS3 transition + JavaScript

CSS3 transition + JavaScript

Externa nyheter

Spelnyheter från FZ