css_day03

最新推荐文章于 2024-05-09 13:55:26 发布

cover.

最新推荐文章于 2024-05-09 13:55:26 发布

阅读量108

点赞数

分类专栏： transition 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44467186/article/details/103984944

版权

transition 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

***以下均是自己边看视频边记录下来的笔记，均是自己认为的主要的或需要注意的内容。***

1.transition（简写)

定义:提供了一种在更改CSS属性时控制速度变化的方法，让属性变化成为一个持续一段时间的过程。

1.1.transition-duration

定义：指定过渡动画所需时间，以秒或毫秒为单位。（必须要加单位ms、s，不能写成0，要写成0s。这里有个坑:就是当指定多个时间时，如果中间的参数“0s”没带单位“s”变成“0”，那么这个属性将失效)
可以指定多个时长，这样它对应多个变化的属性。若时长个数小于属性个数，则时长列表会重复，多余的就被剪掉；若时长个数大于属性个数，多余的也会被剪掉。
例子:
transition-property: width，height;
transition-duration: 1s; //则1s会被重复一次，因此width和height都是1s渐变

1.2.transition-property

定义：指定该元素要过渡的属性。
例子: transition-property: width; //指定width要过渡变化

1.3.transition-timing-function

定义：指定变化的速度。
可以指定多个速度给多个对应的属性过渡变化。
例子:transition-timing-function:linear; //线性变化的速度

1.4.transition-delay

定义：延迟指定时间后过渡开始变化。（单位s，ms）
例子:transition-delay:3s; //延迟3s后才开始变化

1.5.检测过渡是否完成

定义：在每一个属性的过渡完成时，都会触发一个事件，这个事件是transitionend。
注意：如果在过渡完成前，已经把元素的display设置成none，则transitionend事件不会被触发。
例子:

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		
			html{
				height: 100%;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
			}
		
			#test{
				width: 100px;
				height: 100px;
				background: pink;
				text-align: center;
				font: 30px/100px "微软雅黑";
				
				/*display: block;*/
				
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition-property: width,height;
				transition-duration: 2s;
				transition-timing-function: linear;
			}
			
			
		</style>
	</head>
	<body>
		<div id="test">
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var testNode = document.querySelector("#test");
			var bodyNode = document.querySelector("body");
			//dom0事件
			bodyNode.onmouseover=function(){
				testNode.style.width="300px";
				testNode.style.height="300px";
				testNode.style.display="none";
			}
			//dom2
			testNode.addEventListener("transitionend",function(){
				alert("over")
			})
		}
	</script>
</html>
}

页面刚渲染完就来调用这个js里的window.οnlοad=function()函数了，就执行这里面的代码了，但是两个function里面的代码都还没被执行到，鼠标刚放上去的时候，浏览器立马解析这两个function的代码。但是width=“300px”、height="300px"浏览器根本没有渲染，直接就只渲染.display=“none”，所以testNode.addEventListener(“transitionend”,function()也没有执行到。因此，testNode.style.display=“none”; 写到function的最上面还是最下面都是一样的。这里产生了一个js异步的思想，要记住。异步思想就是在js的function里面的代码才是异步代码，function之外，js以内的代码是同步代码。

1.6.过渡的天坑1

例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		
			html{
				height: 100%;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
			}
		
			#test{
				width: 100px;
				height: 100px;
				background: pink;
				text-align: center;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition-property: width;
				transition-duration: 2s;
				transition-timing-function: linear;
			}
			
			body:hover #test{
				transition-property: height;
				width: 200px;
				height: 200px;
			}
			
		</style>
	</head>
	<body>
		<div id="test">
		</div>
	</body>
</html>

对这段代码解释:
原本我鼠标没放到body上时，div过渡的属性就是width，但当我鼠标放到body上时，触发了body:hover #test，由于css解析代码的速度相当快，当我浏览器还没开始渲染页面时，过渡的属性就改成height了，此时，页面才开始渲染高度的过渡过程。
当我鼠标从body身上移开时，css解析代码的速度非常快，原本过渡的属性由height立马变成width，所以浏览器呈现的效果是，此时，只有width产生过渡。

1.7.过渡的天坑2

transition在元素首次渲染还没有结束的情况下是不会被触发的。
浏览器的一个机制如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		
			html{
				height: 100%;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
			}
		
			#test{
				width: 100px;
				height: 100px;
				background: pink;
				text-align: center;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition-property: width;
				transition-duration: 2s;
				transition-timing-function: linear;
			}
		</style>
	</head>
	<body>
		<div id="test">
		</div>
	</body>
	<script type="text/javascript">
		//transition在元素首次渲染还没有结束的情况下是不会被触发的	
			var test = document.querySelector("#test");
			test.style.width="300px";

			

	</script>
</html>

这段代码的解释：
代码是从head开始往下解析的，当解析到

1.8.window.οnlοad=function是在浏览器已经完全渲染完，所有资源在服务器端已经加载完后，才会执行的函数

1.9.transform

定义:该属性允许你修改css视觉格式模型的坐标空间。只对block级元素生效。
一般搭配transition一起使用，才能看到过渡的时候，图形的变化。

1.9.1. rotate

定义：让图形旋转。单位:deg 即度。
例子：transform:rotate(360deg);

1.9.2.translate

定义：让图形平移。单位:px。
其中：
translateX():让图形沿水平方向平移
translateY():让图形沿垂直方向平移
例子:
transform:translateX(120px); //图形向右平移120px
transform:translate(120px，120px); //图形向右下方45度平移169px（勾股定理)

1.9.3.skew

定义:让图形倾斜
例子：transform:skew(-45deg);
在这里插入图片描述

1.9.4.scale

定义：将图形缩放
例子:
transform:scale(.5); //.5就是整体变成原本的0.5倍大小
如图:

1.9.5.origin

定义:改变图形的基点，就是按照这个点旋转变化的点的位置。

1.9.6.变化组合时，切记计算方向是从右往左进行的，比如transform的渲染就是从右往左的

2.关于js里面写函数的注意点

以后写js时的函数时，最好都放在window.οnlοad=function()里面，因为如果放在外面的话，在你获取元素的时候，可能浏览器还没渲染好元素，即dom树可能还没构建好，因此放在这个window.οnlοad=function()里面的话，是在浏览器完全渲染好后才执行里面的函数的

3.transition的天坑3（重点，难点!)

在绝大部分变换样式的切换中（transform），如果变换函数的个数不同或“对应函数”的“对应位置”不对也不会触发过渡。
例子:

//变换函数的个数不一样
			homeEle.onclick=function(){
				if(flag){
					this.style.transform="rotate(-720deg) scale(1)";
				}else{
					this.style.transform="rotate(0deg)";
			}
//对应变换函数的对应位置不一样
			homeEle.onclick=function(){
				if(flag){
					this.style.transform="rotate(-720deg) scale(1)";
				}else{
					this.style.transform="scale(1) rotate(0deg)";
			}

4.主要利用transform、transition做的扇形导航

这都是自己打的代码，一些重要的细节在里面有注释，非常容易疏漏和出错，请仔细地看，直接复制代码即可执行，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				width:50px;
				height: 50px;
				position: fixed;
				right: 15px;
				bottom: 15px;
			}
			.wrap > .home{
				background-image: url(img/home.png);
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 50%;
				transition: 1s;
				/* z-index: 1; */
			}
			.wrap > .inner{
				width: 100%;
				height: 100%;
			}
			.wrap > .inner > img{
				margin: 4px;
				border-radius: 50%;
				position: absolute;
				top: 0;
				left: 0;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="inner">
				<img src="img/clos.png" >
				<img src="img/full.png" >
				<img src="img/open.png" >
				<img src="img/prev.png" >
				<img src="img/refresh.png" >
			</div>
			<div class="home">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var homeEle = document.querySelector(".home");
			var flag = true;
			var imgs = document.getElementsByTagName("img");
			var c = 140;
			
			// 特别注意:因为如果一个元素的transform的函数的个数和位置在每一次的变换样式中不一样的话,那么它的过渡可能不被执行,所以img[i]的每一个transform的函数个数和位置
			// 都固定不变
			
			// 第一部分
			homeEle.onclick=function(){
				if(flag){
					homeEle.style.transform="rotate(-720deg)";
					for(var i = 0; i < imgs.length;i++){
						var x = getPoint(c,i*90/(imgs.length-1)).x;
						var y = getPoint(c,i*90/(imgs.length-1)).y;
						imgs[i].style.left = -x + "px";
						imgs[i].style.top = -y + "px";
						imgs[i].style.transition="1s " + (i*0.1) + "s";
						imgs[i].style.transform="rotate(-720deg) scale(1)";
					}
				}else{
					homeEle.style.transform="rotate(0deg)";
					for(var i = 0; i < imgs.length;i++){
						imgs[i].style.left = 0 + "px";
						imgs[i].style.top = 0 + "px";
						imgs[i].style.transition="1s " + ((imgs.length-i)*0.1) + "s";
						imgs[i].style.transform="rotate(0deg) scale(1)";
					}
				}
				flag = !flag;
			}
			function getPoint(c,deg){
				var x = c*Math.sin(deg*Math.PI/180);
				var y = c*Math.cos(deg*Math.PI/180);
				return{x:x,y:y};
			}
			
			// 第二部分
			for(var i = 0; i < imgs.length; i++){
				imgs[i].onclick=function(){
					this.style.transform="rotate(-720deg) scale(2)";
					this.style.opacity="0.1";
					this.style.transition="0.5s";
					//就是变大和变淡的效果结束后,必须变回原样,所以有这么一个过渡完后要执行的事件即函数
					this.addEventListener("transitionend",fn);
				}
			}
			function fn(){
				this.style.transform="rotate(-720deg) scale(1)";
				this.style.opacity="1";
				this.style.transition="0.3s";
				// 如果不去除掉这个过渡完后必须执行的事件的话,那么点击"home",这5个图片滚出来的时候,也会跟着执行这个过渡完后必须执行的事件,所以一定要清除掉
				this.removeEventListener("transitionend",fn);
			}
			
			
			
		}

	</script>
</html>

初始画面如图：
在这里插入图片描述

5.闭包问题

例子:

for(var i=0;i<imgs.length;i++){
	imgs[i].onclick=function(){
	//下面的四行代码的this如果换成imgs[i]的话，就会出现闭包问题，所以只能用
	//this，所以以后函数里面最好直接用this
		this.style.transition="0.5s ";		
		this.style.transform="rotate(-720deg) scale(2)";
		this.style.opacity=0.1;
		
		this.addEventListener("transitionend",fn)
	}
}

cover.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css_day03

***以下均是自己边看视频边记录下来的笔记，均是自己认为的主要的或需要注意的内容。***css3_day031.transition（简写)1.1.transition-duration1.2.transition-property1.3.transition-timing-function1.4.transition-delay1.5.检测过渡是否完成1.6.过渡的天坑11.7.过渡的天坑21...
复制链接

扫一扫