i working on circular hamburger menu button animates on hover, growing center, 3 bar child divs centered within parent div circle.
the parent div has fixed positioning enable "grow" effect. 3 hamburger menu lines absolutely positioned divs.
when hovering, animated via transition going great, except 3 child divs jump bottom right on hover , top left on mouse out. i've tried tweaking margins, width/height, , positioning, stuck. missing?
.circle-nav { display: block; position: fixed; width: 44px; height: 44px; top: 35px; left: 35px; color: rgba(255, 255, 255, 0.8); background-color: rgb(136, 35, 24); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 2px 2px rgba(0, 0, 0, 0.05); -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px; transition: width 300ms ease, height 300ms ease, transform 300ms ease, background 300ms ease, border-radius 300ms ease, box-shadow 300ms ease, top 300ms ease, left 300ms ease; } .circle-nav:hover { width: 66px; height: 66px; top: 25px; left: 25px; background-color: rgb(187, 53, 39); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 8px 6px rgba(0, 0, 0, 0.05); -webkit-border-radius: 33px; -moz-border-radius: 33px; border-radius: 33px; } .top-bar, .mid-bar, .bot-bar { width: 22px; height: 2px; position: absolute; left: 11px; background-color: #fff; } .top-bar { top: 14px; } .mid-bar { top: 21px; } .bot-bar { top: 28px; } .circle-nav:hover .top-bar { top: 24px; } .circle-nav:hover .mid-bar { top: 31px; } .circle-nav:hover .bot-bar { top: 38px; } .circle-nav:hover .top-bar, .circle-nav:hover .mid-bar, .circle-nav:hover .bot-bar { left: 22px; }<div class="circle-nav"> <div class="top-bar"></div> <div class="mid-bar"></div> <div class="bot-bar"></div> </div>
the problem because transitioning container's dimension change not applying equivalent transition position change of bars. because of this, bars jump new position based on original size of container on hover in (meaning, moves bottom right top , left values larger) , jump original position within enlarged container on hover out (meaning, moves top left top , left smaller). bars move center @ end of transition because container stretched directions.
if add equivalent 300ms transition bars looks fine.
note there still small jump in left position of bar can resolved adjusting left position of container on hover (like have done in snippet).
.circle-nav { display: block; position: fixed; width: 44px; height: 44px; top: 35px; left: 35px; color: rgba(255, 255, 255, 0.8); background-color: rgb(136, 35, 24); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 2px 2px rgba(0, 0, 0, 0.05); -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px; transition: width 300ms ease, height 300ms ease, transform 300ms ease, background 300ms ease, border-radius 300ms ease, box-shadow 300ms ease, top 300ms ease, left 300ms ease; } .circle-nav:hover { width: 66px; height: 66px; top: 25px; left: 24px; /* changed prevent small adjustment during hover */ background-color: rgb(187, 53, 39); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 8px 6px rgba(0, 0, 0, 0.05); -webkit-border-radius: 33px; -moz-border-radius: 33px; border-radius: 33px; } .top-bar, .mid-bar, .bot-bar { width: 22px; height: 2px; position: absolute; left: 11px; background-color: #fff; transition: 300ms ease; /* added prevent jump */ } .top-bar { top: 14px; } .mid-bar { top: 21px; } .bot-bar { top: 28px; } .circle-nav:hover .top-bar { top: 24px; } .circle-nav:hover .mid-bar { top: 31px; } .circle-nav:hover .bot-bar { top: 38px; } .circle-nav:hover .top-bar, .circle-nav:hover .mid-bar, .circle-nav:hover .bot-bar { left: 22px; }<div class="circle-nav"> <div class="top-bar"></div> <div class="mid-bar"></div> <div class="bot-bar"></div> </div>
Comments
Post a Comment