How to following a link without modifying the displayed url and triggering css animation? - css-animations

Question

I have a side menu organised in 2 levels,like
link1
link1.1
link1.2
link1.3
links 1.x are hidden (display:none, applied to the container div) and contained within a div (id = resume-2nd-level)
now, I created a css class:
#resume-2nd-level:target {
display:show
-webkit-transition: height 3s linear 1s;
transition: height 3s linear 1s;
}
link1's href property points to: #resume-2nd-level
My goal is to:
show link1.x when I click on link1 (eventually toggle them: show-hide-show- ..)
link1.x shall not appear immediately but with a css animation with the following specifications: expands in height, starts after 1 second, lasts for 3 seconds before being completely expanded
hide the #resume-2nd-level from browser url (as the link was triggered using Javascript)
However my code doesn't each neither of the two goals.
I tried to show the container containing the links using jQuery's show() onclick and it works (although no animation occurs).
Thanks in advance

Answer 1

The problem you are having is that transition does not work the way you think.
#innerMenu {
height:0%;
width:0%;
position:relative;
overflow:hidden;
-webkit-transition: height 1s linear 3s;
transition: height 3s linear 1s;
-webkit-transition: width 3s linear 1s;
transition: width 3s linear 1s;
}
#innerMenu:target{
height:100%;
width:100%;
}
<ul>
<li>
Menu1
<div id='innerMenu'>
<ul>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
</li>
</ul>
The above snippit shows the proper way to do this.
The transition property needs to see a change in order for it to fire. What you have right now is not changing anything. By trying to show the element you are not actually changing the size of it.
In the snippit you can see what is actually changing is the height and width and the transition can be applied to that change.
Also you need to animate the width because otherwise it will become unhidden instantly.