transition height geht nicht [gelöst]

wolf

Hallo, ich füge mit dem Script ne andere Höhe ein, aber der transition Effekt will einfach nicht

Hier der Code,
http://jsfiddle.net/wolfwortmann/Qz76h/

HTML

<section class="main">
	<article class="art" >
		<div class="imgbox"><img class="ddbtn" src="reck.png"></div>
		<div class="name"><span>gallerie.php</span><span>PHP JS Code</span></div>
		<table>
			<td class="row">
<pre>
1
2
3
4</pre>
			</td>
			<td class="rowcode">
<pre>
&lt;?php
if(this){
echo "hallo";
}</pre>
			</td>
		</table>
	</article>
	<article class="art" >
		<div class="imgbox"><img class="ddbtn" src="reck.png"></div>
		<div class="name"><span>gallerie.php</span><span>PHP JS Code</span></div>
		<table>
			<td class="row">
<pre>
1
2
3
4</pre>
			</td>
			<td class="rowcode">
<pre>
&lt;?php
if(this){
echo "hallo";
}</pre>
			</td>
		</table>
	</article>
	<article class="art" >
		<div class="imgbox"><img class="ddbtn" src="reck.png"></div>
		<div class="name"><span>gallerie.php</span><span>PHP JS Code</span></div>
		<table>
			<td class="row">
<pre>
1
2
3
4</pre>
			</td>
			<td class="rowcode">
<pre>
&lt;?php
if(this){
echo "hallo";
}</pre>
			</td>
		</table>
	</article>
</section>

Alles anzeigen

JavaScript

function toggleArt(article,butn){
	if (article.style.height != "auto") {
		article.style.height = "auto";
		article.styletransition= "height 5s";
		butn.style.transform = "rotate(90deg)";
	}
	else{
		article.style.height = "52px";
		butn.style.transform = "rotate(0deg)";
	}
};




var article = document.getElementsByClassName("art");
var butn = document.getElementsByClassName("ddbtn");
for (var i = 0; i < butn.length; i++){
	butn[i].setAttribute("data-i", i);
	butn[i].onclick = function(){toggleArt(article[this.getAttribute("data-i")],butn[this.getAttribute("data-i")]);}
};

Alles anzeigen

CSS

section.main>p{
	max-width: 800px;
}
section.main .imgbox{
	display: inline-block;
	width: 30px;
	height: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
section.main .imgbox>img{
	height: 10px;

	vertical-align: top;
}
section.main .docu>h2{
	display: inline-block;
	list-style-type: disc;
}
section.main .docu a.button{
	background-color: rgba(255,255,255, 0);
}
section.main .docu a.button:hover{
	background-color: rgba(255,255,255, .8);
}
section.main article{
	font-size: 14px;
	color: #FFF;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 40px;
	padding-left: 40px;
	overflow: hidden;
	background-color: rgba(28,28,28, 1);
	height: 52px;
	transition: height 5s;
}
section.main article:nth-child(1n+5){
	border-top: 2px solid black;
}
section.main article p{
	max-width: 800px;
}
section.main article .name{
	display: inline-block;
}
section.main article .name>span{
	display: block;
}
section.main article table{
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
}
section.main article td.rowcode{
	width: calc(100% - 31px);
	padding-left: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
section.main article td.row{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 3px;
	width: 30px;
	text-align: right;
	border-right: 1px solid #FFF;
}
section.main article pre{
	font-size: 14px;
}

Alles anzeigen

cottton

article.styletransition

Muss doch
article.style.transition
Heissen,oder?

Edit,
Du kommsr evtl besser, wenn du via css klassen defiinierst un per js da.n die class setzt

wolf

Wenn ich ne Klasse setze findet ja ne neu definition statt und dann gehts erst recht nicht..

Und ja, sollte style.transition =
heißen

cottton

Bin nicht zu hause also kanns nicht testen,
Aber es sollte gehen;
.wrap
Transition ...
.heightx
Height;...px
.heighty
Hdight;...px

Durch den wrapper wir ja dann festglegt, dass bei hoehenaenderung animiert wirt.
Un per heightx und heighty class aendert sich die hoehe

wolf

Ok, das Problem liegt einfach daran, dass height auf auto steht, wenn man ne feste höhe vergibt.. gehts, aber dann ists blöd
Gibts ne möglichkeit das iwi zu umgehen?

http://jsfiddle.net/wolfwortmann/Qz76h/2/

cottton

so jetz hab ich mal rin geguckt:

neu:
class .art{}
geändert:
nur die toggle func
und in class section.main article
/*transition: height 5s;*/ auskommentiert

achja, und die links zu den boxen, da nicht ladbar =)

>>> http://jsfiddle.net/Qz76h/3/

Das war das, was ich meinte:
Du gibst dem Wrap die "Aufgabe" alles was mit height zu tun hat zu animieren.
Also wird, sobald Du per JS die height änderst, die Änderung animiert =)

wolf

Und jetzt mach mal das hier:

article.style.height = "auto";

Und dann geht es nichtmehr ..

cottton

jetz raff ichs.
da gibts nen Trick: http://css3.bradshawenterprises.com/animating_height/
Stichwörter; transition , max-height

erneut geändert:
class section.main article:
max-height: 52px;
und class .art auf max-height gesetzt
und toggle function auf artikel.style.maxHeight

geht aber irgendwie nur beim Zuklappen. Bekomms auch grad nicht hin.
http://jsfiddle.net/Qz76h/4/

wolf

Bäääääähm ich habe es geschafft

http://jsfiddle.net/wolfwortmann/Qz76h/6/

Also zur Lösung:
von Anfang an dem Element eine Höhe geben.
Mit max-height arbeiten!!
Dann geht alles einwandfrei :3

JA MAN

lauras, So eine Funktion sollte es hier im forum für die Codes in den threads geben!
Das wär mal voll nice

Jetzt mitmachen!