标签：动画 dropdown 变换 transition color toggle 过渡 280
过渡transition
通常，我们的css样式是静态的，也就是说css中定义的属性就是页面渲染后的最终呈现效果。但发生像为某个元素设置:hover伪类并且此时改变一些属性（鼠标悬停在该元素时样式生效），或者使用JavaScript修改页面的某些元素的style这类操作，如果我们为该元素的一个或多个css属性中设置了过渡，那么当它们发生改变时，它会由初始值相对缓慢地变成新值，而不是直接变成新值，其中过渡的中间效果由浏览器实现。简写属性transition依次接收四个参数：
- transition-property：需要进行过渡的属性。可以设置为关键字all，表示所有过渡能生效的属性都进行过渡；
- transition-duration：过渡持续的时间；
- transition-timing-function：定时函数，控制过渡过程中变化率如何加速或减速；
- transition-delay：延迟时间，表示经过指定时间后过渡才开始生效；
一个过渡高度值的菜单
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dropdown_toggle{
display: block;
padding: 0.5em 1em;
border: 1px solid hsl(280,10%,80%);
color: hsl(280,30%,60%);
background-color: white;
text-decoration: none;
transition: background-color 0.2s linear;
}
.dropdown_toggle:hover{
background-color: hsl(280,15%,95%);
}
.dropdown_drawer{
position: absolute;
background-color: white;
width: 150px;
height: 0; /*关闭状态下高度为0，且溢出部分隐藏*/
overflow: hidden;
transition: height 1s ease-out; /*为高度添加过渡属性*/
text-align: center;
}
.dropdown.is-open .dropdown_drawer{ /*打开状态时的高度由内容确定*/
height: auto;
}
.menu{
padding-left: 0;
margin: 0;
list-style: none;
}
.menu >li+li >a{
border-top: 0;
}
.menu>li>a{
display: block;
padding: 0.5em 1em;
color: hsl(280,40%,60%);
background-color: white;
text-decoration: none;
transition: all .2s linear;
border: 1px solid hsl(280,10%,80%);
}
.menu>li>a:hover{
background-color: hsl(280,15%,95%);
color: hsl(280,25%,10%);
}
</style>
</head>
<body>
<div class="dropdown" aria-haspopup="true">
<button class="dropdown_toggle" style="width: 150px">Menu</button>
<div class="dropdown_drawer">
<ul class="menu" role="menu">
<li role="menuitem">
<a href="/features">Features</a>
</li>
<li role="menuitem">
<a href="/pricing">Pricing</a>
</li>
<li role="menuitem">
<a href="/support">Support</a>
</li>
<li role="menuitem">
<a href="/about">About</a>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
(function (){
var toggle = document.getElementsByClassName('dropdown_toggle')[0];
var dropdown = toggle.parentElement;
var drawer = document.getElementsByClassName('dropdown_drawer')[0];
var height = drawer.scrollHeight
toggle.addEventListener('click',function (e){
e.preventDefault();
dropdown.classList.toggle('is-open'); //点击后，为.dropdown添加.is-open类，表示菜单打开状态
if(dropdown.classList.contains('is-open')){
drawer.style.setProperty('height',height+'px');//打开状态时精确设置高度值
}else {
drawer.style.setProperty('height','0')//关闭状态时高度设置为0，可以实现关闭时的滑动效果
}
});
}());
</script>
</html>
我们想让用户在点击菜单时，菜单项滑动打开，也即高度由0过渡到菜单项内容占据的高度。但由于并不清楚菜单项容器的高度是多少，一开始我想让高度值由0过渡到auto，但发现过渡不生效。因此，使用JavaScript获取容器的scrollHeight属性值，来计算容器的高度，然后在菜单被点击时修改.is-open状态下容器的高度，这样就能使高度由0过渡到确切值。
标签：动画,dropdown,变换,transition,color,toggle,过渡,280 来源： https://www.cnblogs.com/evil-shark/p/16530561.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。