transition 过渡

如果想做出细腻的过渡效果，那么这个属性可能会满足你的需求。这个属性简单的来说就是用来模拟需要变化的属性，从开始到结束数值之间的过渡。

1. 官方定义

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

2. 慕课解释

transition 用来设置一个属性状态从开始到结束中间这个过程的变化。它是 transition-property、transition-duration、transition-timing-function、transition-delay、这四个属性的缩写。它们分别代表了：要使用过度动画的属性、过渡动画的时间、过渡动画的加速度函数即数值变化的快慢过程、过渡动画的延迟时间。而我们通常使用过渡属性完成元素过渡的这个过程一般使用 transition 。

3. 语法

.demo{
    transition: property duration timing-function delay;
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3

属性值说明：

4. 兼容性

5. 实例

1. 当鼠标移动到元素上，使用过渡属性来让元素的高度变化，从而实现一个过渡效果。

<div class="demo"></div>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: height 1s;
}
.demo:hover{
    height: 150px;
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9

效果图：

2. 当鼠标移动上去改变元素的宽高值，让它们都实现过渡动画。

写法一：

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: height 1s,width 1s;
}
.demo:hover{
    width: 150px;
    height: 150px;
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10

写法二：

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: all 1s;
}
.demo:hover{
    width: 150px;
    height: 150px;
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10

效果图：

说明：这两种方式都可以实现我们所要的过渡方式。不过这里慕课推荐使用第一种方式。

3. 改变上面过渡完成的速度。

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: height 1s ease-in,width 1s ease-out;
}
.demo:hover{
    width: 150px;
    height: 150px;
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10

效果图：

说明：在 transition 第三个值使用了动画函数，改变了过渡过程中完成的速度，我们可以很清楚的看到他们的变化速度。

4. 当鼠标移动上去 1s 之后开始动画。

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: height 1s ease-in 1s,width 1s ease-out 1s;
}
.demo:hover{
    width: 150px;
    height: 150px;
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10

效果图：

说明：我们可以看到鼠标放到元素上 1s 之后开始动画，而离开元素之后 1s 之后开始动画。

6. Tips

通过上面的实例可以知道 transition 的属性值配置很灵活，但是我们要遵循一定的规律，这不单是增加了代码的可读性，也符合浏览器解析规则的规律。

hover 到按钮上改变按钮的位置和背景颜色。

<button class="demo">慕课</button>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1

.demo{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    background: #000;
    color:#fff;
    border:none;   
    transition: background .4s,transform .4s;
}
.demo:hover{
   background: red;
   transform: translateY(-5px);  
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果图：

7. 小结

1. 尽量不要使用 all 来驱动过渡的属性，这会使得浏览器卡顿。
2. 尽量不要使用 margin-left 这类的属性，很可能会打乱页面元素的位置。
3. 推荐使用 transform 来改变元素的位置和大小。