前端高度变化实现过渡动画
一、height
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heighttitle>
<style>
.select {
/* 初始高度 */
height: 0;
overflow: hidden;
background-color: red;
/* 过度动画持续1s */
transition: all 1s;
}
button:hover+.select {
/* 最终高度 */
height: 110px;
background-color: pink;
}
style>
head>
<body>
<button>hoverbutton>
<div class="select">
<div>前提：已知初始高度与最终高度。div>
<div>如果有这个前提，那么这个动画是最好实现的了。div>
<div>3div>
<div>4div>
div>
body>
html>
二、max-height
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>max-heighttitle>
<style>
.select {
/* 初始最大高度 */
max-height: 0;
overflow: hidden;
background-color: red;
/* 过度动画持续1s */
transition: all 1s;
}
button:hover+.select {
/* 最终最大高度 */
max-height: 110px;
/* 缺陷将下面代码注释去掉，你就知道了。*/
/* max-height: 1110px; */
background-color: pink;
}
style>
head>
<body>
<button>hoverbutton>
<div class="select">
<div>利用最大高度实现过度动画。div>
<div>但是有缺陷，如果最大高度大于需要的高度，就会有明显的延迟。（相当于设置了初始高度与最终高度）div>
<div>3div>
<div>4div>
div>
body>
html>
三、transform
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transformtitle>
<style>
.select {
/* 缩小到0 */
transform: scaleY(0);
transform-origin: center top;
overflow: hidden;
background-color: red;
/* 过度动画持续1s */
transition: all 1s;
}
button:hover+.select {
/* 恢复到原本大小 */
transform: scaleY(1);
background-color: pink;
}
style>
head>
<body>
<button>hoverbutton>
<div class="select">
<div>利用的就是放大，缩小。div>
<div>这个方法是用css实现最简单的方法。div>
<div>3div>
<div>4div>
div>
body>
html>
四、grid
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gridtitle>
<style>
.parent {
/* 将父设置为grid布局 */
display: grid;
/* 设置子高度为0fr */
grid-template-rows: 0fr;
overflow: hidden;
transition: all 1s;
background-color: red;
}
/* 必须将子元素的最小高度设置一下,不然没有效果,因为0fr选取的就是文字自动撑开的高度 */
.parent div {
min-height: 0;
}
button:hover+.parent {
/* 设置子高度为1fr */
grid-template-rows: 1fr;
background-color: pink;
}
style>
head>
<body>
<button>hoverbutton>
<div class="parent">
<div class="select">
<div>利用的是栅格布局div>
<div>缺陷：就是很新的布局，很多老浏览器不支持；并且Safari浏览器不支持grid动画。div>
<div>3div>
<div>4div>
div>
div>
body>
html>
五、JavaScript
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScripttitle>
<style>
.select {
--origin-height: 0;
/* 初始高度 */
height: var(--origin-height);
overflow: hidden;
/* 反正动画一直在，可以写好动画 */
transition: height 1s;
background-color: pink;
}
style>
head>
<body>
<button>hoverbutton>
<div class="select">
<div>最终实现走的还是height，只是通过JavaScript来获取已知初始高度与最终高度来实现动画。div>
<div>缺陷：效率问题，并且实现起来最复杂。div>
<div>3div>
<div>4div>
div>
<script>
// 获取按钮dom
const button = document.querySelector('button')
// 获取列表dom
const select = document.querySelector('.select')
// 获取初始高度
const originHeight = getComputedStyle(select).getPropertyValue('--origin-height')
// 类似与css中hover：onmouseenter、onmouseleave
// 进入
button.onmouseenter = () => {
// 自适应高度
select.style.height = 'auto'
// 这个时候,通过select.offsetHeight来重排获取最新确定的数值高度
const height = select.offsetHeight
// 恢复最开始的状态
select.style.height = originHeight
// 通过select.offsetHeight来页面重排,从而确保页面的过渡
// 如果去掉这句话,那么动画就不会生效
select.offsetHeight
// 最终确定高度
select.style.height = height + 'px'
}
// 离开
button.onmouseleave = () => {
/* 恢复初始高度 */
select.style.height = originHeight
}
script>
body>
html>
可能会问到的问题
height: auto；auto不是数值，所以动画没有效果，而需要产生动画效果，必须是数值单位。相当于必须告诉transition初始是多少，最终是多少；是一个确切的值或者是有计量单位就可以。
解决浮动带来的影响
margin塌陷现象
浮动会产生的影响：
高度塌陷：如果父亲没有固定的高度，子元素会添加浮动，后面元素上去补位置，父元素会高度变低
1.给父元素一个固定的高度
缺点：父元素是固定高度时，如果元素过多，会产生溢出
2.清除浮动，不让补位元素进行补位
缺点：如果父元素里面只有一个子元素，没有补位元素，则需要给部位元素后面添加
一个元素，应用清除浮动，但是这个元素类型必须是块元素一般使用div
3.给父元素添加overflow:hidden;
除了溢出隐藏外，还会触发BFC块级元素上下文，形成一个独立的区域，不受到外界的干扰，也不会把内部元素影响到外部，同时还能让浮动的元素参与高度的计算用于解决高度塌陷。
缺点：会隐藏溢出元素
优点：简单、代码简洁
4.万能清除
父级添加after伪元素
父级添加双伪元素
互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷
解决办法:
1 给父元素设置 padding-top或 border-top
2 给父元素设置 overflow: hidden;
3 把子元素转换为行内块 display: inline-block;
4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 1px; */
/* border-top: 1px solid transparent; */
/* overflow: hidden; */
}
.son {
display: inline-block;
/* float: left; */
margin-top: 20px;
width: 200px;
height: 200px;
background-color: purple;
}
