过渡，变换与动画
作者：互联网
过渡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