13.transition(过渡)13.transition(过渡) 一.过渡(transition)定义　　过渡tr

一.过渡(transition)定义

　　过渡transition是一个复合属性，包括==transition-property、transition-duration、transition-timing-function、transition-delay==这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果

transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法

GIF 2021-5-9 14-06-26-1620540416443.gif

<style>
    /* 
    transition过渡
      1.transition-property:过渡属性
      2.transition-duration:过渡时长
      3.transition-timing-function:过渡函数，默认liner(匀速)
      4.transition-delay:过渡延时
     */
    .box {
      width: 100px;
      height: 100px;
      background-color: pink;
      transition-property: width, transform;
      transition-duration: 2s;
      transition-timing-function: liner;
      transition-delay: 1s;
    }

    /*  .box:hover {
      width: 200px;
      transform: translate(600px, 0)
    } */
  </style>

  <body>
    <div class="box">div</div>
    <button class="btn">点击</button>

  </body>
  <script type="text/javascript">
    let btn = document.querySelector('.btn');
    let box = document.querySelector(".box");
    let x = 600;
    btn.onclick = function () {
      box.style.width = 200 + "px";
      /* 1.连接符写法 */
      // box.style.transform = "translate(" + 600 + "px)";
      /* 2. ES6 引入模板字符串：
            注意不是引号，而是反号
      */
      box.style.transform = `translate(${x}px)`;
      box.style.transform = `translate(${600}px)`;
    }
  </script>

二.复合属性

过渡transition的这四个子属性只有是必需值且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个；当只有一个时间时，它是，而为默认值0

transition: || || ||

　　[注意]transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性

GIF 2021-5-9 15-46-39-1620546435154.gif

 <style>
    /* 
    transition过渡的复合写法：transition-property transition-duration transition-timing-function transition-delay
       1.transition-property选填
       2.transition-duration过渡时长（必填）
       3.transition-timing-function：
       4.transition-delay延时函数
     */
    .div {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: 100px auto;
      transition: transform 1s linear 0s;
    }

    .div:hover {
      transform: rotate(360deg);
    }
  </style>

  <body>
    <div class="div">div</div>
  </body>

三.过渡属性

3.1 transition-property

　　值: none | all | [,]*

　　初始值: all

　　应用于: 所有元素

　　继承性: 无

none: 没有指定任何样式 all: 默认值，表示指定元素所有支持transition-property属性的样式 : 可过渡的样式，可用逗号分开写多个样式

3.2 可过渡的样式

不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

Vstart = 开始值; Vend = 结束值; Vres = 中间值; p = 过渡函数的输出值 Vres = (1 - p) * Vstart + p * Vend 当Vres具有有效值时，则该CSS样式可过渡

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: [1]max-height min-height max-width min-width height width [2]border-width margin padding outline-width outline-offset [3]font-size line-height text-indent vertical-align
[4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient

四.过渡持续时间

该属性的单位是秒s或毫秒ms

transition-duration

　　值: [,]*

　　初始值: 0s

　　应用于: 所有元素

　　继承性: 无

　　[注意]该属性不能为负值

　　[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位

　　[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

五.过渡延迟时间

该属性定义元素属性延迟多少时间后开始过渡效果，该属性的单位是秒s或毫秒ms

transition-delay

　　值: [,]*

　　初始值: 0s

　　应用于: 所有元素

　　继承性: 无

　　[注意]该属性若为负值，无延迟效果，但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0，则无过渡效果；若该设定值大于0，则过渡元素从该设定值开始完成剩余的过渡效果

　　[注意]若该属性为0s则为默认值，若为0则为无效值。所以必须带单位

　　[注意]该值为单值时，即所有过渡属性都对应同样时间；该值为多值时，过渡属性按照顺序对应持续时间

六.过渡时间函数

过渡时间函数用于定义元素过渡属性随时间变化的过渡速度变化效果

transition-timing-function

　　值: [,]*

　　初始值: ease

　　应用于: 所有元素

　　继承性: 无

取值

过渡时间函数共三种取值，分别是关键字、steps函数和bezier函数

steps函数

　　steps步进函数将过渡时间划分成大小相等的时间时隔来运行

　　steps步进函数为

steps(<integer>[,start | end]?)

<integer>:用来指定间隔个数(该值只能是正整数)
第二个参数: 该参数可选，默认是end，表示开始值保持一次；若参数为start，表示开始不保持

6.1 贝塞尔曲线

贝塞尔曲线通过p0-p3四个控制点来控制，其中p0表示(0,0)，p3表示(1,1)。而就是通过确定p1(x1,y1)和p2(x2,y2)的值来确定的

transition-timing-function: cubic-bezier(x1,y1,x2,y2);

　　[注意]x1,y1,x2,y2都是0到1的值(包括0和1)

6.2关键字

关键字其实是bezier函数或steps函数的特殊值

ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
linear: 匀速。相当于cubic-bezier(0,0,1,1)
ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
step-start: 直接位于结束处。相当于steps(1,start)
step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

七.多值

transition的多个属性值用逗号分隔开表示可以同时为多个值设置过渡属性

transtion: <single-transition>[,<single-transition>]*

<single-transition>: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

//property为all，timing-function为linear,delay为0s，duration为0s。表示无过渡行为
transition: 0s;

7.1 若不同的transition-property值，对应的transition-delay | transition-timing-function | transition-duration的属性值都相同时，则对应的这些属性设置一个即可

test1{
   transition-property: width,background;
   transition-delay: 200ms; 
   transition-timing-function: linear; 
   transition-duration: 2s;
   }
/*类似于*/

test2{ 
    transition: width 2s linear 200ms,
    background 2s linear 200ms;
}

GIF 2021-5-9 16-05-30-1620549519600.gif

7.2 当transition-property值的个数多于对应的transition-delay | transition-timing-function | transition-duration的属性值(==属性值的个数大于1个)时，将按顺序开始取值==

test1{
    transition-property: width,background,opacity; 
    transition-duration: 2s,500ms; 
    transition-timing-function: linear,ease; 
    transition-delay: 200ms,0s;
}
/*类似于*/
#test2{ 
     transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;
}

GIF 2021-5-9 16-09-22-1620549523962.gif

7.3 当transition-property值的个数少于对应的transition-delay | transition-timing-function | transition-duration的属性值个数时，==多余的属性值将无效==

test1{ 
     transition-property: width; 
     transition-duration: 2s,500ms; 
     transition-timing-function: linear,ease; 
     transition-delay: 200ms,0s;

}
/*类似于*/ 
#test2{ 
    transition: width 2s linear 200ms;
}

GIF 2021-5-9 16-13-15-1620549527660.gif

7.4 当transition-property的值中出现一个无效值，它依然按顺序对应transition的其他属性值(==其他属性出现无效值，处理情况也类似==)

test1{ 
     transition-property: width,wuxiao,background; 
     transition-duration: 2s,500ms; 
     transition-timing-function: linear,ease; 
     transition-delay: 200ms,0s;
}
/*类似于*/ 
#test2{ 
     transition: width 2s linear 200ms,background 2s linear 200ms;
}

GIF 2021-5-9 16-16-15-1620548228909-1620549534582.gif

7.5 当transition-property的值中，有些值重复出现多次，则以==最后出现的值为准，前面所有出现的值都被认定为无效值==，但依然按顺序对应transition的其他属性值

test1{ 
     transition-property: width,width,background; 
     transition-duration: 2s,500ms; 
     transition-timing-function: linear,ease; 
     transition-delay: 200ms,0s;
}
/*类似于*/ 
#test2{ 
     transition: width 500ms ease 0s,background 2s linear 200ms;
}

GIF 2021-5-9 16-18-56-1620549538850.gif

八.过渡阶段

【1】过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续时间

【2】过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值

【3】过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值

GIF 2021-5-9 16-24-50-1620549542011.gif

【4】以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准

.test{
    width: 100px;
    transition: 3s;
}    
.test:hover{
    width: 500px;
    transition: 500ms;
}

GIF 2021-5-9 16-23-49-1620549545563.gif

【5】如果子元素和父元素过渡属性都一致。若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值

.box:hover{
    font-size: 50px;
}
.test:hover{
    font-size: 30px;
}

<div class="box">
    <div class="test">test</div>
</div>

GIF 2021-5-9 16-24-20-1620549548608.gif

7.6若过渡起始值或过渡开始值为auto，则浏览器不会自己计算成具体数字值，而是不发生过渡效果。所以要过渡某些属性，首先需要将其重置成具体数字值

[注意]低版本webkit内核浏览器存在bug，会产生反向的过渡效果

.test{
    width: 100px; -webkit-transition: width 2s;
    transition:width 2s;
}    
.test:hover{
    width:auto;
}

GIF 2021-5-9 16-35-56-1620549551770.gif

【7】隐式过渡是指一个属性改变时引起另一个属性的改变。如border-width是1em，则font-size改变时，border-width也会相应的改变。firefox和IE浏览器支持隐式过渡。而webkit内核浏览器不支持隐式过渡。

.test{
    border: 1px solid black; -webkit-transition: font-size 2s;
    transition:font-size 2s;
    font: 20px/100px "宋体";
}    
.test:hover{
    font-size: 40px;
    border-right-width: 1em;
}

GIF 2021-5-9 16-36-27-1620549554301.gif

八.触发方式

一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等

8.1 hover:鼠标悬停触发

8.2 active:用户单击元素并按住鼠标时触发

8.3 focus:获得焦点时触发

8.4 @media触发:符合媒体查询条件时触发

/* 把浏览器的宽度拖动到小于1000px时触发 */ @media (max-width: 1000px){
    .test{
        width: 500px;
    }
}

8.5 点击事件:用户点击元素时触发

test.onclick = function(){
    test.style.width = '300px';
    setTimeout(function(){
        test.style.width = '100px';
    },3000);
}