css transition

199 阅读3分钟

transition: 过渡

transition 什么时候生效的

元素从一种样式变成另一种样式时的平滑过渡效果。在这种情况下,transition会在元素样式发生更改时立即生效,

tranform

一般transition 要搭配transform

translate

image.png

scale 旋转

image.png

rotate 旋转

使用rotate属性可以在原图基础上进行旋转

/* 在原图的基础上,顺时针旋转45度角 */

transform: rotate(45deg);

/* 在原图的基础上,顺时针旋转半圈 */

transform: rotate(0.5turn);

改变变形原点

变形原点的位置,会影响到具体的变形行为 默认情况下,变形的原点在盒子中心,你可以通过transform-origin来改变它

transform-origin: center; /* 设置原点在盒子中心 */
transform-origin: left top; /* 设置原点在盒子左上角 */
transform-origin: right bottom; /* 设置原点在盒子右下角 */
transform-origin: 30px 60px; /* 设置原点在盒子坐标 (30, 60) 位置 */

叠加使用transform

可以一次性设置多种变形效果

/* 先旋转45度,再平移(100,100) */
transform: rotate(45deg) translate(100px, 100px);
/* 先平移(100, 100),再旋转45度 */
transform: translate(100px, 100px) rotate(45deg);

注意:旋转会导致坐标系也跟着旋转,从而可能影响到后续的变形效果

transition

过渡和动画无法对所有的CSS属性产生影响,能够产生影响的只有数值类属性,例如:颜色、宽高、字体大小等等

transition: 过渡属性 持续时间 过渡函数 过渡延迟

  • 过渡属性

    针对哪个css属性应用过渡。例如填写transform,则表示仅针对transform属性应用过渡。

    若填写all或不填写,则表示针对所有css属性都应用过渡

  • 持续时间

    css属性变化所持续的时间,需要带上单位。例如3s表示3秒,0.5s500ms均表示500毫秒

  • 过渡函数

    本质是css属性变化的贝塞尔曲线函数,通常直接使用预设值:

    ease-in-out:平滑开始,平滑结束

    linear:线性变化

    ease-in:仅平滑开始

    ease-out:仅平滑结束

  • 过渡延迟

    书写规则和持续时间一样,表示过渡效果延迟多久后触发,不填则无延迟

    案例

    实现下拉菜单效果

.gif

   <!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <style>
   	* {
   		margin: 0;
   		padding: 0;
   		font-size: 100%;
   		list-style: none;
   	}

   	.menu {
   		width: 200px;
   		height: 50px;
   		background: #409eff;
   		color: #fff;
   		line-height: 50px;
   		margin: 0 auto;
   		margin-top: 50px;
   		text-align: center;
   		cursor: pointer;
   		position: relative;
   	}

   	.sub-menu {
   		background: #ddebfd;
   		font-size: 14px;
   		line-height: 35px;
   		color: #333;
   		padding: 10px 0;
   		position: absolute;
   		width: 100%;
   	}
   </style>
   <style>
   	/* 在这里完成作业 */
   	.sub-menu {
   		transform: scaleY(0);
   		transition: all 0.5s;
   		transform-origin: center top;
   	}

   	.menu:hover .sub-menu {
   		transform: scaleY(1);
   	}
   </style>
</head>

<body>
   <div class="menu">
   	<h2>下拉菜单</h2>
   	<ul class="sub-menu">
   		<li>子菜单1</li>
   		<li>子菜单2</li>
   		<li>子菜单3</li>
   		<li>子菜单4</li>
   	</ul>
   </div>
   <script>
   </script>
</body>


</html>

手风琴效果

动画.gif 方法:

  1. 给每个h2添加点击事件
  2. 点击事件,判断自身有没有高度,有高度啥都不干,没高度设为150px
  3. 同时将其他的submenu的高度设为0,隐藏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
			font-size: 100%;
			font-weight: normal;
		}

		ul {
			list-style: none;
		}

		.desc {
			color: #666;
			font-size: 14px;
			text-align: center;
			margin: 1em 0;
		}

		.menu-container {
			width: 200px;
			margin: 50px auto;
			background: #434a50;
			color: #fff;
			line-height: 1.5;
		}

		.menu h2 {
			padding: 10px 20px;
			cursor: pointer;
		}

		.sub-menu {
			background: #565c63;
		}

		.sub-menu li {
			font-size: 14px;
			padding: 8px 0 8px 30px;
		}
	</style>
	<style>
		.sub-menu {
			border-radius: 5px;
			height: 0;
			overflow: hidden;
			transition: 1s;
		}
	</style>
</head>

<body>
	<p class="desc">本效果需要用到JS</p>
	<p class="desc">为降低复杂度,子菜单高度固定为150px</p>
	<p class="desc">
		因为如果高度为auto,无法产生过渡效果,必须通过一些特别的技巧才能解决
	</p>
	<div class="menu-container">
		<div class="menu">
			<h2>菜单1</h2>
			<ul class="sub-menu">
				<li>菜单1-1</li>
				<li>菜单2-2</li>
				<li>菜单3-3</li>
				<li>菜单4-4</li>
			</ul>
		</div>
		<div class="menu">
			<h2>菜单2</h2>
			<ul class="sub-menu">
				<li>菜单2-1</li>
				<li>菜单2-2</li>
				<li>菜单2-3</li>
				<li>菜单2-4</li>
			</ul>
		</div>
		<div class="menu">
			<h2>菜单3</h2>
			<ul class="sub-menu">
				<li>菜单3-1</li>
				<li>菜单3-2</li>
				<li>菜单3-3</li>
				<li>菜单3-4</li>
			</ul>
		</div>
		<div class="menu">
			<h2>菜单4</h2>
			<ul class="sub-menu">
				<li>菜单4-1</li>
				<li>菜单4-2</li>
				<li>菜单4-3</li>
				<li>菜单4-4</li>
			</ul>
		</div>
	</div>
	<script>
		let h2 = document.querySelectorAll('.menu h2');
		for (let i = 0; i < h2.length; i++) {
			h2[i].onclick = handle

		}
		function handle() {
			let ul = this.nextElementSibling;
			if (ul.clientHeight) {
				ul.style.height = 0;
			} else {
				ul.style.height = '150px';
			}
			let subs = document.querySelectorAll('.sub-menu');
			for (let i = 0; i < subs.length; i++)
				if (subs[i] !== this.nextElementSibling) {
					subs[i].style.height = 0;
				}
		} 
	</script>
</body>

</html>