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

这篇具有很好参考价值的文章主要介绍了前端高度变化实现过渡动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、height

  • 前提:已知初始高度与最终高度。
  • 如果有这个前提,那么这个动画是最好实现的了。
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>height</title>
	<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>hover</button>
	<div class="select">
		<div>前提:已知初始高度与最终高度。</div>
		<div>如果有这个前提,那么这个动画是最好实现的了。</div>
		<div>3</div>
		<div>4</div>
	</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-height</title>
	<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>hover</button>
	<div class="select">
		<div>利用最大高度实现过度动画。</div>
		<div>但是有缺陷,如果最大高度大于需要的高度,就会有明显的延迟。(相当于设置了初始高度与最终高度)</div>
		<div>3</div>
		<div>4</div>
	</div>
</body>

</html>

三、transform

  • 利用的就是放大,缩小。
  • 这个方法是用css实现最简单的方法。
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>transform</title>
	<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>hover</button>
	<div class="select">
		<div>利用的就是放大,缩小。</div>
		<div>这个方法是用css实现最简单的方法。</div>
		<div>3</div>
		<div>4</div>
	</div>
</body>

</html>

四、grid

  • 利用的是栅格布局
  • 缺陷:就是很新的布局,很多老浏览器不支持;并且Safari浏览器不支持grid动画。
<!-- 
	参考资料: https://juejin.cn/post/7196843994030342200
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>grid</title>
	<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>hover</button>
	<div class="parent">
		<div class="select">
			<div>利用的是栅格布局</div>
			<div>缺陷:就是很新的布局,很多老浏览器不支持;并且Safari浏览器不支持grid动画。</div>
			<div>3</div>
			<div>4</div>
		</div>
	</div>
</body>

</html>

五、JavaScript

  • 最终实现走的还是height,只是通过JavaScript来获取已知初始高度与最终高度来实现动画。
  • 缺陷:效率问题,并且实现起来最复杂。
<!-- 
	参考资料-深入理解浏览器的重绘与重排: https://zhuanlan.zhihu.com/p/148825597
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript</title>
	<style>
		.select {
			--origin-height: 0;
			/* 初始高度 */
			height: var(--origin-height);
			overflow: hidden;
			/* 反正动画一直在,可以写好动画 */
			transition: height 1s;
			background-color: pink;
		}
	</style>
</head>

<body>
	<button>hover</button>
	<div class="select">
		<div>最终实现走的还是height,只是通过JavaScript来获取已知初始高度与最终高度来实现动画。</div>
		<div>缺陷:效率问题,并且实现起来最复杂。</div>
		<div>3</div>
		<div>4</div>
	</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>

可能会问到的问题

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

height: auto;auto不是数值,所以动画没有效果,而需要产生动画效果,必须是数值单位。相当于必须告诉transition初始是多少,最终是多少;是一个确切的值或者是有计量单位就可以。文章来源地址https://www.toymoban.com/news/detail-841973.html

到了这里,关于前端高度变化实现过渡动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS】过渡动画

    不加过渡动画,变化不太流畅 MDN css transitions w3school transform transform :用于元素的变形,显示变形后的状态,不是变形的过程,变形过程需要配合 transition 表示 2D 转换 translate(50px, 100px) 平移 rotate(20deg) 顺时针旋转 20 度 rotateX(150deg) 绕其 X 轴旋转给定角度 scaleX(2) 增大为其原始

    2024年02月04日
    浏览(43)
  • CSS基础-过渡动画

    CSS3新添加了过渡动画, 即使用者定义好 一个元素的 开始状态 和 结束状态 , CSS会根据变化曲线形成 补间动画 效果。 CSS3中用 transition 属性来描述动画如何运动。 定义 下面我们重点了解下, 哪个属性需要过渡 , 还有 变化曲线是什么 下面我们重点聊聊两点: 哪个属性需要

    2024年02月10日
    浏览(52)
  • css3过渡与动画

    在数字时代,网页不再是静态的画面,而是充满活力和动感的空间。CSS3的过渡与动画技术就像是一场魔法表演,能够赋予网页以生命。本文将引领你进入这个奇妙的世界,解锁CSS3过渡与动画的神奇效果。 transition过渡属性时css3浓墨重彩的特性,过渡可以为一个元素在不同样

    2024年01月16日
    浏览(52)
  • CSS3过渡与动画,2D与3D

    该属性用于定义元素边框的背景图像 语法: border-image:none | url(img) imagesection [/imagewidth] imaghandling 其中imagesection定义用于边框不同部分的图像部分。imagesection值可以由图像上的4条分隔线组成,每条线以像素或者百分比为度量。 imaghandling可以定义的三个,用于控制分隔线

    2024年02月03日
    浏览(45)
  • 【CSS笔记】CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画

    这篇文章,主要介绍CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画。 目录 一、2d动画 1.1、渐变色 (1)线性渐变色 (2)径向渐变色

    2024年02月02日
    浏览(93)
  • CSS3 属性: transition过渡 与 transform动画

    CSS3 提供了很多强大的功能,使开发人员可以创建更加吸引人的视觉效果,而不需要依赖于 JavaScript 或 Flash。其中, transition 和 transform 是两个常用的属性,它们分别用于创建平滑的过渡效果和元素的变形效果。下面我们将详细介绍这两个属性的使用方法并给出代码示例。 t

    2024年02月04日
    浏览(49)
  • 【JAVA】CSS3:3D、过渡、动画、布局、伸缩盒

    透视点位置:观察者位置 在2D位移基础上,可以让元素沿z轴移动 cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com 贝塞尔曲线: cubic-bezier(.17,.67,.83,.67) ✿ cubic-bezier.com 效果:鼠标悬浮,图片旋转,字体出现,背景模糊 鼠标悬浮前:  鼠标悬浮后: 帧:一个视频包含多个画面,每一个

    2024年03月22日
    浏览(41)
  • CSS实现单行或者多行文本溢出隐藏并且显示省略号

    如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行; 详细步骤: 第一步(不换行):white-space:nowrop;(对于连续的数字或者英文字母可省略) 第二步(溢出隐藏)overflow:hidden; 第三步(文本溢出显示省略号)text-overf

    2024年02月16日
    浏览(54)
  • CSS3 高级- 复杂选择器、内容生成、变形(transform)、过渡(transition)、动画(animation)

    兄弟选择器:选择平级元素的唯一办法 -适用:通过已知元素选择之后的平级兄弟元素时 1、相邻兄弟选择器: 2、通用兄弟选择器: 属性选择器: -通过元素的属性来定位元素 1、通用:基本用不着,太泛了 2、自定义:4种 1、精确条件: 2、模糊条件: 3、模糊条件:很少用,

    2024年04月09日
    浏览(55)
  • 【Web2D/3D】CSS3的2D/3D转换、过渡、动画(第一篇)

    1. 前言         本篇开始介绍Web2D和3D相关基础知识,会从CSS3的2D/3D转换、过渡、动画,讲到Canvas 2D图形绘制,再到SVG,最后到WebGL。         坐标系:左上点是坐标原点(0,0),x轴正方向向右,y轴正方向向下,z轴正方向向外(垂直屏幕向外)。 2. 2D转换         CSS3的2D/3D旋

    2024年02月04日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包