You should put the transition on .bar
:
<style>
.bar {
background-color: yellow;
transition: all ease 1s;
}
.opened .bar{
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
</style>
Because as soon as you remove .opened
the transition is removed as well, before doing any transition.