CSS Transition doesn't work with width
Question
When I was creating my dropdown menu I discovered a problem, I've been googling for one hour and now I want to ask. So I want to increase the width and the background at the same time with the transition, but it just changes the opacity just take a look at the code snippet and hover over the submenu and you will see it just changes the opacity. The thing is I want it to increase the width with transition.
.nav { background-color: #333; } .nav ul { padding: 0; margin: 0; list-style: none; position: relative; } .nav ul li { display: inline-block; background-color: #333; } .nav a { display: block; padding: 0 10px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; font-family: Sansa_Light; width: 170px; } .nav ul li a:hover { background-color: #111; /*width:170px;*/ } .nav ul ul li a:hover { background-color: #111; width: 170px; -webkit-transition: all 1s ease-in; -o-transition: all 1s ease-in; -moz-transition: all 1s ease-in; transition: all 1s ease-in; } .nav ul ul { display: none; position: absolute; top: 60px; } .nav ul li:hover > ul { display: inherit; } .nav ul ul li { width: 170px; float: none; display: list-item; position: relative; } .nav ul ul ul li { position: relative; top: -60px; left: 170px; }
<div class="nav"> <ul> <li><a>Test drop</a> <ul> <li><a>Dropped</a> </li> </ul> </li> <li><a>Non drop</a> </li> </ul> </div>
2 answers
solution1
0 ACCPTED 2016-01-30 10:57:15
- If you want a smooth transition to be not only on hover (but on unhover too), you should add a
transitionproperty for main selected, not only on:hoverselector. - You forgot to add a
transitionproperty for<ul>, now it's only on<a>. -
displayproperty is not animatable , you should useopacity+visibility. - Old vendor prefixes for
transition(like-oand-moz) aren't actual now, see Can I Use .
.nav { background-color: #333; } .nav ul { padding: 0; margin: 0; list-style: none; position: relative; } .nav ul li { display: inline-block; background-color: #333; width: 170px; position: relative; } .nav a { display: block; padding: 0 10px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .nav ul li a:hover { background-color: #111; } .nav ul ul { opacity: 0; visibility: hidden; position: absolute; width: 0; top: 60px; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .nav ul li:hover > ul { width: 100%; opacity: 1; visibility: visible; } .nav ul ul li { width: 100%; display: list-item; } .nav ul ul ul li { top: -60px; left: 170px; }
<div class="nav"> <ul> <li><a>Test drop</a> <ul> <li><a>Dropped</a></li> </ul> </li> <li><a>Non drop</a></li> </ul> </div>
solution2
0 2017-09-20 02:10:32
display isn't an Animatable CSS property, so you can't using transition properties on it!
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
https://www.w3schools.com/cssref/css_animatable.asp
as @sergey-denisov said,
displayproperty is not animatable, you should useopacity + visibility!
a live demo: https://codepen.io/gildata/pen/bopoQZ
<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .showPanel { /* display: block; */ visibility: visible; /* opacity === 不透明度 1 & 不透明 === opaque */ opacity: 1; height: 100%; width: 100%; /* transform: translateX(100px); */ -webkit-transition: all 1.0s ease-in 0.5s; transition: all 1.0s ease-in 0.5s; } .hidePanel { /* display: none; */ visibility: hidden; /* opacity === 不透明度 0 & 透明 === transparent */ opacity: 0; height: 0; width: 0; /* transform: translateX(-100px); */ -webkit-transition: all 1s ease 0.5s; -moz-transition: all 1s ease 0.5s; transition: all 1s ease 0.5s; /* -webkit-transition: property duration timing-function delay; -moz-transition: property duration timing-function delay; transition: property duration timing-function delay; */ } </style> </head> <body> <div> <!-- js in HTML ??? onclick="test(e);" --> <button id="btn">button</button> <div class="showPanel" id="panel"> <div> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> </div> <div> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> </div> <div> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> </div> <div> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> content <br> </div> </div> </div> <div> <pre> .showPanel { display: block; /* height: 100%; */ /* transform: translateX(100px); */ -webkit-transition: all 1.0s ease-in 0.5s; transition: all 1.0s ease-in 0.5s; } .hidePanel { display: none; /* height: 0; */ /* transform: translateX(-100px); */ -webkit-transition: all 1.0s ease-out 0.5s; transition: all 1.0s ease-out 0.5s; /* -webkit-transition: property duration timing-function delay; -moz-transition: property duration timing-function delay; transition: property duration timing-function delay; */ } </pre> </div> <script> const btn = document.querySelector("#btn"); const panel = document.querySelector("#panel"); btn.addEventListener(`click`, (e) => { console.log(`e = \\n`, e); let className = panel.className; if (className === "showPanel") { panel.className = "hidePanel"; } else { panel.className = "showPanel"; } }); const test = (e) => { console.log(`e = \\n`, e); }; </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS transition doesn't work
CSS transition doesn't work
Can't make CSS width transition work
Transition time doesn't work with CSS3
CSS transition doesn't work in Firefox
CSS transition opacity works 0 to 1 but doesn't work 1 to 0
CSS transition doesn't work after Javascript
CSS3 transition doesn't work
transition doesn't work with css - no fade in animation
Css3/Javascript transition doesn't work
Related Tags