transition
Posted love-life-insist
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了transition相关的知识，希望对你有一定的参考价值。
1：transition：
CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义
简写属性transition:
transition是一个简写属性，用于 transition-property,transition-duration,transition-timing-function, 和transition-delay。
（1）transition-property：
属性值：
none
没有过渡动画。
all
所有可被动画的属性都表现出过渡动画。
IDENT
属性名称 （可以指定多个）
（2）transition-duration
属性以秒或毫秒为单位指定过渡动画所需的时间。
默认值为 0s ，表示不出现过渡动画。
（3）transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变
默认值：ease
属性值：
1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier： 贝塞尔曲线
7、step-start：等同于steps(1,start)
step-end：等同于steps(1,end)
steps(<integer>,[,[start|end]]?)
第一个参数：必须为正整数，指定函数的步数
第二个参数：指定每一步的值发生变化的时间点（默认值end）
（4）transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
默认值：0s
//当属性值列表长度不一样的时候
transition-property: background,width,height;
transition-duration: 3s,2s;
transition-delay:3s,2s;
transition-timing-function:linear;
transition-property: background,width,height;
transition-duration: 3s,2s,3s;
transition-delay:3s,2s,3s;
transition-timing-function:linear,ease,ease;
超出的情况下是会被全部截掉的
不够的时候，关于时间的会重复列表，transition-timing-function的时候使用的是默认值ease
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）
在transition完成前设置 display: none，事件同样不会被触发
推荐抒写顺序
过渡时间 过渡样式 过渡形式 延迟时间 [，过渡时间 过渡样式 过渡形式 延迟时间]
transition: 2s 3s width,3s height; //简写属性第一个默认赋值给transition-duration，第二个时间赋值给transition-delay:
////代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html{
height: 100%;
}
body{
height: 60%;
width: 80%;
border: 1px solid;
margin: 10%;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
/*transition: 3s;*/
transition-property: width,height;
transition-duration: 2s,2s;
}
</style>
</head>
<body>
<div class="box1">
</div>
<script type="text/javascript">
window.onload = function(){
var box1 = document.querySelector(".box1");
document.documentElement.onmousemove = function(){
box1.style.width = "300px"
box1.style.height = "300px";
}
box1.addEventListener("transitionend",function(){
console.log("过渡");
})
}
</script>
</body>
</html>
以上是关于transition的主要内容，如果未能解决你的问题，请参考以下文章