transition过渡

实例

如果想看到div的宽度有1000px变到100px的过程
1、给div的宽度添加过渡属性 transition-property: width;
2、设置过渡持续时间 transition-duration: 3s;
3、鼠标移入div 即可。

代码实现

 div {
      width: 1000px;
      height: 100px;
      background-color: aqua;
      /* 要过渡的属性 width*/
      transition-property: width;
      /* 过渡的持续时间 3s*/
      transition-duration: 3s;
    }

    div:hover{
      width: 100px;
    }

语法

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

复合写法

 /* 过渡的属性为width 持续3s 匀速 延迟0s */
   transition: width 3s linear 0s;

多个过渡写法

可以同时对一个元素的多个属性添加过渡 对宽度和高度设置不同的过渡

 transition: 
        width 1s ease-in 1s,
        height 10s ease-in-out 2s;

过渡结束事件

元素在执行过渡结束之后，会自动触发的事件 transitionend

 var div = document.querySelector("div");
    div.addEventListener("transitionend", function () {
      console.log("div的过渡结束之后，触发");
    })