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
Post a Comment