css3 - Unable to get transition effect when using display block -


i'm animating menu showing 1 item multiple can't transition add display: block;, need hidden elements doesn't take space. using visibility instead doesn't work since takes space. how can fix this?

.feed-menu {     border: 2px solid white;     border-radius: 10px; } .feed-menu:hover .feed-menu-item {     display: block;     width: auto;     opacity: 1; } .feed-menu > .feed-menu-item {     display: none;     width: 0;     opacity: 0;     float: left;     padding: 10px 20px;     text-align: center;     -webkit-transition: 400ms ease-in-out;              -o-transition: 400ms ease-in-out;                     transition: 400ms ease-in-out; } .feed-menu > .feed-menu-item.selected {     display: block;     width: auto;     opacity: 1; } 

fiddle: https://jsfiddle.net/9yxr5bap/3/


Comments

Popular posts from this blog

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -