transition属性
Posted 郭郭郭牧鑫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了transition属性相关的知识，希望对你有一定的参考价值。
transition
Transition概念
Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。
transition-property 用于指定应用过渡属性的名称
transition-duration 用于指定这个过渡的持续时间
transition-delay 用于指定延迟过渡的时间
transition-timing-function 用于指定过渡的类型
transition-property
指定应用过度属性的名称，默认值为all，表示所有可被动画的属性都表现出过度动画
property：指定多个；
none：没有过度动画；
all：所有可被动画的属性都表现出过度动画；
IDENT：属性名称（可以指定多个）
注意：当只设置了 transition-property 属性而没有设置过渡持续时间的时候，过渡效果不会生效。
transition-duration
用于设置过渡的持续时间，属性值以秒s或毫秒ms为单位，默认值为0。
可以指定多个时长，多个每个时长会被应用到由 transition-property 指定的对应属性上。
例如：想让容器的宽度有一个10秒的过渡，高度有一个5秒的过渡，代码如下:
<style>
.box {
width: 200px;
height: 200px;
background-color: dodgerblue;
transition-property: width, height;
transition-duration: 10s, 5s; /*设置与 transition-property 对应的过渡时间*/
}
.box:hover { /*在鼠标移入的时候修改宽高*/
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
transition-delay
规定了在过渡效果开始作用之前需要等待的时间（延迟时间），值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在什么时候开始。取值为正时会延迟响应过渡效果；取值为负时会使过渡立即开始。
可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性transition-property。
transition-timing-function
css属性受到transition的影响，会产生不断变化的中间值，而css transition-timing-function属性用来描述 这个中间是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。
- linear 匀速
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速，效果比 ease 感觉强烈一些
- cubic-bezier 贝塞尔曲线
过渡的坑
transition在元素首次渲染还没有结束的情况下是不会被触发的
示例代码：
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
width: 60%;
height: 60%;
border: 1px solid;
margin: 100px auto 0;
}
#test {
width: 100px;
height: 100px;
border-radius: 50%;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
}
</style>
<body>
<div id="test">
</div>
</body>
<script type="text/javascript">
alert(1);
//transition在元素首次渲染还没有结束的情况下是不会被触发的
/* var test = document.querySelector("#test");
test.style.width = "300px"; */
/* window.onload = function() {
var test = document.querySelector("#test");
test.style.width = "300px";
} */
setTimeout(function() {
var test = document.querySelector("#test");
test.style.width = "300px";
}, 3000);
</script>
*指定的过度的属性的名称要一致
*简写属性顺序不能错
总结
<style>
.box {
width: 200px;
height: 200px;
background-color: dodgerblue;
/* transition 简写属性 */
transition: 1s width, 2s height;
}
.box:hover {
width: 400px;
height: 400px;
}
</style>
<body>
<div class="box"></div>
</body>
特别注意：
在transition中，值是有书写顺序的：第一个为时间的值会被赋值给transition-duration，第二个为时间的值会被赋值给transition-delay
推荐抒写顺序
过渡时间-过渡样式-过渡形式-延迟时间
以上是关于transition属性的主要内容，如果未能解决你的问题，请参考以下文章
使用js和css-transition属性57行代码实现简易无缝轮播图
CSS过渡属性transitions详细解读——Web前端系列学习笔记