老师帮我看下 下拉菜单怎么实现下拉过度效果
来源：3-5 让菜单下拉
琥珀_2020
2019-12-19 12:51:02
<!DOCTYPE html> <html lang="en"> <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"> <!-- <link rel="stylesheet" href="./css/index.css"> --> <link rel="stylesheet" href="./css/dropDown.css"> <link rel="stylesheet" href="./font/iconfont.css"> <title>dropDown</title> </head> <body> <!-- <div class="dropDown"> <div class="dropDownToggle">我的慕淘</div><i class="iconfont xialajiantou"></i> <div class="dropDownLayer"> </div> </div> --> <div class="dropDown"> <div class="dropDownToggle">我的慕淘</div><i class="iconfont xialajiantou dropDownActive"></i> <div class="dropDownLayer dropDownActive"> <a href="###" class="menuItem">已买到宝贝</a> <a href="###" class="menuItem">我的足迹</a> </div> </div> <script src="./js/jquery.js"></script> <script src="./js/dropDown.js"></script> </body> </html>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
/* 字体图标属性 */
.iconfont {
font-family: "iconfont" !important;
font-size: 25px !important;
line-height: 25px;
text-align: center;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ===================================== */
/* dropDown */
.dropDown {
position: relative;
}
.dropDownToggle {
position: relative;
width: 90px;
height: 45px;
line-height: 45px;
font-size: 20px;
text-align: center;
display: inline-block;
color: #4d555d;
}
.dropDownToggle:hover {
color: #f01414;
}
.xialajiantou {
display: inline-block;
width: 25px;
height: 28px;
transition: all 0.5s;
cursor: pointer;
/* background-color: rgb(165, 4, 4); */
}
.dropDownLayer {
display: none;
position: absolute;
top: 44px;
left: 10px;
transition: ease-in-out all 0.5;
}
.menuItem {
display: block;
width: 75px;
height: 30px;
line-height: 30px;
text-align: right;
white-space: nowrap;
color: #4d555d;
transition: all 0.5;
}
.menuItem:hover {
color: #f01414;
}
/* 滑入下拉菜单显示下拉项目(通过js实现) */
/* .dropDownActive .xialajiantou {
color: #f01414;
transform: rotate(180deg);
}
.dropDownActive .dropDownLayer {
display: block;
} */
/* 滑入下拉菜单显示下拉项目(直接通过CSS实现) */
.dropDownActive .dropDownToggle,.dropDown:hover .xialajiantou {
color: #f01414;
transform: rotate(180deg);
}
.dropDownActive .dropDownLayer,.dropDown:hover .dropDownLayer {
display: block;
transition: all 0.5;
}怎么实现下拉时有过渡效果 就像箭头一样 有点动画
写回答
1回答
-
同学你好，关于你的问题，回答如下：
1、transition属性值中时间缺少单位，建议：添加下单位，例：
2、元素本身中添加了过渡，hover的时候，就可以不加了，因为本身就是应用同一个元素的。
3、这里直接在css中使用display设置显示隐藏，使用动画是无效的，有以下几个方式同学可以参考下（都是不使用display属性的方法）：
（1）使用透明度opacity，从 0.0 （完全透明）到 1.0（完全不透明），实现从隐藏到显示。
（2）在js中使用jquery的show与hide方法。
（3）设置top值为负值，让其隐藏到浏览器顶部上去。然后hover的时候，改变top的值。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题