-
transition语法
- transtion : 运动时间 延迟时间 运动的属性 ,运动轨迹
- trnasition : 2s 1s width ease
- 运动时间:可以是S 也可以是毫秒ms
- 延迟时间：可以是S也可以是毫秒ms
- 属性 : 表示变化的属性
- 运动形式:
- ease:默认(逐渐变慢)
- linear:(匀速)
- ease-in : (加速)
- ease-out:(减速)
- ease-in-out :(先加速后减速)
- cubic-bezier:(贝塞尔曲线)
-
过渡完成事件 transitionend:
- webkit内核
- obj.addEventListener('webkitTransitionEnd',function(){},false);
- firefox:
- obj.addEventListener('transitionend',function(){},false);
- -webkit-transform-origin: 50% 50% 0 ;(默认)
- 第一个参数表示X轴 第二个参数表示Y轴 第三个参数表示Z轴
- 此方法不能与translate同时使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
.box {width: 100px; height: 100px; background: red;}
/* .box {transition: 1s;} */
/*.box {transition: 500ms width;}*/
/*.box {transition: 1s all;}*/
/*.box {transition: 3s width ease;}*/
/*.box {transition: 3s width ease-in-out;}*/
/*.box {transition: 3s width cubic-bezier(0.930, 0.415, 0.000, 1.610);}*/
/* .box {transition: 1s width, 2s height, 3s background;} */ /*多样式过渡*/
/*.box {transition: 1s width, 2s 1s height, 3s 3s background;}*/ /*延迟过渡*/
.box:hover {background: blue; width: 500px; height: 300px;}
</style>
<script>
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
.box {width: 100px; height: 100px; background: red; transition: 1s width}
</style>
<script>
</script>
</head>
<body>
<div class="box" id="box"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(){
this.style.width = this.offsetWidth + 100 + 'px';
}
//transitonend之后，又改变属性，接着又触发了transition就形成了循环
addEnd(oBox, function(){
this.style.width = this.offsetWidth + 100 + 'px';
});
function addEnd(obj, fn){
obj.addEventListener('webkitTransitionEnd', fn, false);
obj.addEventListener('transitionend', fn, false);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
.box {width: 100px; height: 100px; background: red; transition: 1s width}
</style>
<script>
</script>
</head>
<body>
<div class="box" id="box"></div>
<script>
var oBox = document.getElementById('box');
oBox.onclick = function(){
this.style.width = this.offsetWidth + 100 + 'px';
addEnd(oBox, end);
}
function end(){
this.style.width = this.offsetWidth + 100 + 'px';
removeEnd(this, end);
}
function addEnd(obj, fn){
obj.addEventListener('webkitTransitionEnd', fn, false);
obj.addEventListener('transitionend', fn, false);
}
function removeEnd(obj, fn){
obj.removeEventListener('webkitTransitionEnd', fn, false);
obj.removeEventListener('transitionend', fn, false);
}
</script>
</body>
</html>
