***以下均是自己边看视频边记录下来的笔记，均是自己认为的主要的或需要注意的内容。***
css3_day03
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)
}
}
扫一扫
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
