transition过渡
2018-07-24 本文已影响0人
金桔柠檬加冰
实例
如果想看到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的过渡结束之后，触发");
})
