當你知道一個元素的初始狀態和最終狀態，你想要這個元素從初始到最終，比如你想讓一個div從紅色變成藍色，但又不想那么生硬的直接變過去，這時候就可以使用過渡了。
transition: property duration timing-function delay;
- property 指定要過渡的CSS屬性
- duration 指定過渡的時間
- timing-function 速度曲線，比如勻速，先慢后快
- delay 延遲開始執行過渡效果的時間
如下代碼，將鼠標移上去，div元素會變寬，有一個動畫的效果，在開始之前設定div的寬度，再:hover上又重新定義了該元素的寬度，於是開始和最終的狀態都有了，中間的動畫效果，由瀏覽器自己去處理。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width 2s; /*后面兩個參數不寫，瀏覽器會使用默認的值*/
}
.container:hover{
width: 400px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
transition-timing-function
以上面代碼為例，來看看這些時間曲線有什么不同
-
linear 規定以相同速度開始至結束的過渡效果
-
ease 規定慢速開始，然后變快，然后慢速結束的過渡效果
-
ease-in 規定以慢速開始的過渡效果
-
ease-out 規定以慢速結束的過渡效果
-
ease-in-out 規定以慢速開始和結束的過渡效果
-
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
以上這列可以在瀏覽器自帶的調試器的CSS屬性面板那調試，直到滿意為止
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width 2s; /*后面兩個參數不寫，瀏覽器會使用默認的值*/
transition-timing-function: cubic-bezier(0.95, -0.18, 0, 0.46);
}
.container:hover{
width: 400px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
transition-delay
延時執行的時間
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width 2s cubic-bezier(0.95, -0.18, 0, 0.46) 1s;
}
設置多個過渡
關鍵代碼
transition: width,height,background 2s,2s, 1s;
也可以寫成下面的樣子
transition-property: width,height,background;
transition-duration: 2s,2s, 1s;
完整代碼
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width,height,background 2s,2s, 1s;
}
.container:hover{
width: 400px;
height: 400px;
background: pink;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
點擊按鈕執行過渡
上面是通過鼠標移上去才過渡的，但如果是點擊這種怎么搞，CSS沒這玩意的偽類啊
通過js添加類來達到效果
第一步：把最終的狀態類寫上
.container-click{
width: 400px;
height: 400px;
background: pink;
}
第二步：寫js代碼，記得給div加個id，如下
let num = 0;
let div = document.getElementById('div');
div.onclick = function(){
if(num === 0){
div.classList.add("container-click");
num = 1;
}else{
div.classList.remove("container-click");
num = 0;
}
}
完整代碼
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition-property: width,height,background;
transition-duration: 2s,2s, 1s;
}
.container-click{
width: 400px;
height: 400px;
background: pink;
}
</style>
</head>
<body>
<div class="container" id="div"></div>
<script type="text/javascript">
let num = 0;
let div = document.getElementById('div');
div.onclick = function(){
if(num === 0){
div.classList.add("container-click");
num = 1;
}else{
div.classList.remove("container-click");
num = 0;
}
}
</script>
</body>
</html>