servo/tests/ref/transition_calc.html
2015-09-19 19:39:55 -07:00

25 lines
459 B
HTML

<style>
.outer {
width: 100px;
height: 100px;
}
.inner {
transition: height 0s;
height: calc(100px + 5%);
width: 100px;
background: red;
display: inline-block;
}
.inner.active {
height: 200px;
}
</style>
<div class=outer>
<div class=inner id=inner></div>
</div>
<script>
requestAnimationFrame(function() {
document.getElementById('inner').className = 'inner active';
requestAnimationFrame(function() {});
});
</script>