• 前端高度变化实现过渡动画

    前端高度变化实现过渡动画

    一、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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    二、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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    三、transform

    • 利用的就是放大，缩小。
    • 这个方法是用css实现最简单的方法。
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    四、grid

    • 利用的是栅格布局
    • 缺陷：就是很新的布局，很多老浏览器不支持；并且Safari浏览器不支持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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    五、JavaScript

    • 最终实现走的还是height，只是通过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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    可能会问到的问题

    • 为什么高度设置成auto不行？

    height: auto；auto不是数值，所以动画没有效果，而需要产生动画效果，必须是数值单位。相当于必须告诉transition初始是多少，最终是多少；是一个确切的值或者是有计量单位就可以。

  • 相关阅读:
    Postgresql源码（88）column definition list语义解析流程分析
    河南工业大学人工智能与大数据学院学子在第三届“火焰杯”软件测试开发选拔赛中 取得佳绩
    HTML标签
    elasticsearch 之 histogram 直方图聚合
    百度文心一言GPT免费入口也来了！！！
    数据链路层协议
    头歌实验快速排序
    【flutter / dart 版本】Websocket获取B站直播间弹幕教程——基于B站直播开发平台
    命名路由、组件中name的作用
    数据仓库数据集成开源工具
  • 原文地址：https://blog.csdn.net/qq_45019494/article/details/132866432