[JavaScript][CSS] animacja tabeli w css Opcje

[lolarz]

Js:

Kod

function home () {
    var trBottom = document.getElementById('trBottom');
    var classes = trBottom.className.split(' ');
    var index = classes.indexOf('On');
    if (index == -1) {
        classes.push('On');
    } else {
        classes.splice(index, 1);
    }
    trBottom.className = classes.join(' ');
}

html:

Kod

<table>
<tr id="trTop">
<td>1</td>                      
</tr>
        
<tr id="trBottom">
<td>2</td>
</tr>
</table>
<div onclick="home()"></div>

css:

Kod

#trBottom {
    vertical-align: top;
}
#TrBottom.On {
    height: 92px;
}

Czy jest jakiś sposób żeby zrobić animacje zmiany wysokości/szerokości <tr> albo <td>? kombinuje już od godziny, ale nic na razie się nie udało. Kombinowałem z tym i z tym, ale ani to ani to nie działało. Dzięki z góry za odp, jeżeli się pojawią

[koodo218]

Jest różnica pomiędzy #trBottom, a #TrBottom.On i wcale nie chodzi o klasę

[lolarz]

Sorki, przepisywałem kod, a nie kopiowałem, u mnie jest #trBottom i #trBottom.On i normalnie wszystko działa, wysokość się zmienia itd, ale animacja nie działa.
Tutaj mniej więcej jak to wygląda: https://jsfiddle.net/72o03p8v/1/

Ten post edytował lolarz 2.07.2016, 17:11:12

[koodo218]

https://jsfiddle.net/koodo218/72o03p8v/3/

[lolarz]

Czy to możliwe że to wina przeglądarki? W firefoxie mi to nie działa (już zmieniony kod), sprawdziłem w safari i działa.